Web Api OWIN CORS Issue

HI ,

I am working with Web Api and trying to add token based authentication using OWIN

I have implemented in my code and able to generate the token and access the webapi resource uing the token .

it is working when client and service in the same port and getting problem when both are in different server.

I have implemented Web API CORS and able to access from other server .

I have implemented Microsoft.Owin.Cors and used in the Startup class .

I am using Jquery Ajax method to call the token service .

Here is the code sample i have used .

OWIN Code :

public class Startup
{
public void Configuration(IAppBuilder app)
{
HttpConfiguration config = new HttpConfiguration();
WebApiConfig.Register(config);
ConfigureOAuth(app);
app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
app.UseWebApi(config);
}
public void ConfigureOAuth(IAppBuilder app)
{
OAuthAuthorizationServerOptions OAuthServerOptions = new OAuthAuthorizationServerOptions()
{
AllowInsecureHttp = true,
TokenEndpointPath = new PathString("/WagtokenService"),
AccessTokenExpireTimeSpan = TimeSpan.FromMinutes(30),
Provider = new ProjectAuthorizationServiceProvider()
};
// Token Generation
app.UseOAuthAuthorizationServer(OAuthServerOptions);
app.UseOAuthBearerAuthentication(new OAuthBearerAuthenticationOptions());
}
}

Provider

public class ProjectAuthorizationServiceProvider : OAuthAuthorizationServerProvider
{
public override async Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context)
{
context.Validated();
}
public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
var allowedOrigin = context.OwinContext.Get<string>("as:clientAllowedOrigin");
if (allowedOrigin == null) allowedOrigin = "*";
bool isValidUser = false;
context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });
if (context.UserName == "[email protected]" && context.Password == "national")
{
isValidUser = true;
}
if (!isValidUser)
{
context.SetError("invalid_grant", "The user name or password is incorrect.");
return;
}
var identity = new ClaimsIdentity(context.Options.AuthenticationType);
identity.AddClaim(new Claim("sub", context.UserName));
identity.AddClaim(new Claim("role", "admin"));
context.Validated(identity);
}
}

WebApi Config

public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
var cors = new EnableCorsAttribute("http://192.168.2.175:3330", "WagtokenService,accept,accesstoken,authorization,cache-control,pragma,content-type,origin", "GET,PUT,POST,DELETE,TRACE,HEAD,OPTIONS");
config.EnableCors(cors);
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
config.Routes.MapHttpRoute(
name: "NewActionApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}

Following code block will be called when log in button clicked

$('#a_login').click(function (e) {
debugger;
if (isValidEmailAddress($('#txt_UID').val()) && $('#txt_PWD').val() != "") {
var loginData = {
grant_type: 'password',
username: $('#txt_UID').val(),
password: $('#txt_PWD').val()
};
$.ajax({
url: url_bearerToken,
type: 'POST',
data: loginData,
contentType: "application/json",
done: function (data) {
// alert('success fully sign in to the application');
sessionStorage.setItem(bearer_token_key, data.access_token);
},
success: function (data) {
// alert('success fully sign in to the application');
sessionStorage.setItem(bearer_token_key, data.access_token);
window.location.href = "../Admin/UserProfiler.html";
},
error: function (x, h, r) {
///e.preventDefault();
// alert("Invalid user credentials");
$('#div_alert').show();
sessionStorage.setItem(bearer_token_key, '');
}
});
}
else {
$('#div_alert').show();
}
});

Getting Following issue .

XMLHttpRequest cannot load http://localhost:53014/WagtokenService. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.2.175:3330' is therefore not allowed access.

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bikesh Srivastava9y ago
Accepted answer
yes you are correct Ravi ,but it will resolve request from other server,other header,,,,,
don't worry its also used to resolve with OWIN
Ravi Kiran Chanduri9y ago
As Bikesh said , it is enough to set Access-Control-Allow-Origin in one place . now my problem got resolved
Ravi Kiran Chanduri9y ago
Bikesh,

I am getting same issue even I used your code in my webapi config .
Can you provide me any sample for this .
Ravi Kiran Chanduri9y ago
Thanks Bikesh and Fabio ,

I don't have a problem with Web API CORS (able to get the data form other server ).I have a problem with OWIN CORS .
Fabio Silva Lima9y ago
Hello!
Try to use atributte in web api controllers:
[EnableCors(origins: "http://localhost", headers: "*", methods: "*")]
    public class BaseApiController : ApiController
    {
    }
It's always work for me.
Bikesh Srivastava9y ago
Hi,
I have already faced this issue but found best solution ,use this code insdie webapi.config file.
//Enable CORS for all origins,all headers,all methods,
            //We can customize this to match our requirement
            //Note://The CORS is enabled for the Web API only, not for the Token middleware Provider
            var corsAttr = new EnableCorsAttribute("*", "*", "*");
            config.EnableCors(corsAttr);
Mark as answer if best for you..