WEB API AngularJS Google+Login CORS not allowed

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?

Answers


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


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.


Need Your Help

Rebuilding Maven indexes Stuck at 0%

java eclipse spring maven

I am trying to rebuild the Maven index in Eclipse, but it has been stuck at 0% for hours.

HTML inside Twitter Bootstrap 3 popover

html twitter-bootstrap popover

I'm trying to make html inside popover. But it doesn't works .