WEB API AngularJS Google+Login CORS not allowed

Question

i am currently using WEB API 2 and AngularJS. (livermorium:1234 = where my web api is running from.) I simply want to use Google+ and Facebook-Login, but i am not able to give access to external urls like http:www.google.de for authentication.

This is my angularJS request:

$http.get('http://Livermorium:1234/api/Account/ExternalLogins?returnUrl=/&generateState=true')
        .success(function (data, status, headers, config) {
            $http.get('https://www.google.de')
                .success(function (data) {
                    $log.log('-- successfull Google retrievement');
                    $log.log(data);
        })
})

And in my WEB API "WebApiConfig.cs" i even allowed every url cors enabled:

public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        // Configure Web API to use only bearer token authentication.
        config.SuppressDefaultHostAuthentication();
        config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);
        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }

But it keeps telling me:

XMLHttpRequest cannot load https://www.google.de/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://livermorium:1234' is therefore not allowed access.

I even added customHeaders to my webconfig. Without success.

<system.webServer>
<handlers>
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <remove name="OPTIONSVerbHandler" />
  <remove name="TRACEVerbHandler" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE" />
    <add name="Access-Control-Allow-Headers" value="*" />
  </customHeaders>
</httpProtocol>

Has anyone a working example or an idea why my request keeps being denied?

Try this? http://stackoverflow.com/questions/17756550/angularjs-cors-issues — j.wittwer, Mar 16 '14 at 11:56
Already tried to add '$httpProvider.defaults.useXDomain = true; and/or delete $httpProvider.defaults.headers.common['X-Requested-With'];' to my app-configuration No success. I am desperate what else i could do to solve it. — Justin Mind, Mar 16 '14 at 14:27
Why are you doing a HTTP GET request for `https://www.google.de`? That's not how you do Google+ Sign-In. Maybe it's supposed to be a redirect instead? — abraham, Mar 16 '14 at 14:37
BTW CORS headers are set on the destination server (aka Google's) not your server running the website. — abraham, Mar 16 '14 at 14:38

score 2 · Accepted Answer · answered Jul 28 '14 at 18:29

I am using the owin middleware, too. So i had to do some changes: "WebApiConfig.cs" old:

var cors = new EnableCorsAttribute("*", "*", "*");
    config.EnableCors(cors);

"WebApiConfig.cs" new:

config.EnableCors();

"startup.cs" i added this line:

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

So it looks like this:

public void Configuration(IAppBuilder app)
    {
        HttpConfiguration config = new HttpConfiguration();

        ConfigureOAuth(app);

        WebApiConfig.Register(config);
        app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
        app.UseWebApi(config);

    }

Resource: http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/

Thank you very much

score 0 · Answer 2 · answered Jul 27 '14 at 17:40

if you set config.EnableCors(cors) is't necessary the customHeader in web.config.

remove all'customHeader from your web.config.

<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE" />
<add name="Access-Control-Allow-Headers" value="*" />

i had the same problem, and I solved this way.

WEB API AngularJS Google+Login CORS not allowed

2 Answers2