Hi I created a MVC SPA application with Individual Account enabled and successfully able to get the access token after registration process
I also created a WEB API project with Individual account enabled. and hosted both MVC and API projects in localhost.
I tried to access the API from the MVC application with the Bearer token saved in my session storage. It works fine as long as both the projects are in localhost. I hosted the API project in Azure and the API call returns 'Unauthorized' always if I try to access it from the localhost MVC app with the bearer token created by the web application.
Sample Code:
MVC Application :
$.ajax({
url: 'https://azureapi/api/getProducts',
headers: {
'Authorization': 'Bearer ' + accesstoken,
'Content-Type': 'application/json; charset=utf-8'
},
type: "POST", /* or type:"GET" or type:"PUT" */
dataType: "json",
data: JSON.stringify(model),
success: function (result) {
},
error: function (e) {
debugger;
console.log(e.responseText);
}
});
API Project:
[Authorize]
[Route("getProducts")]
[HttpPost]
public HttpResponseMessage GetProducts(ProductCriteria model)
{}
Enabled CORS in WEB API
// Configure Web API to use only bearer token authentication.
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
var enableCORS = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(enableCORS);