WEB API AngularJS Google+Login CORS 不允许

Posted 2023-03-04

【中文标题】WEB API AngularJS Google+Login CORS 不允许

【英文标题】：WEB API AngularJS Google+Login CORS not allowed

【发布时间】：2014-04-21 13:55:03

【问题描述】：

我目前正在使用 WEB API 2 和 AngularJS。 （livermorium:1234 = 我的 web api 是从哪里运行的。） 我只是想使用 Google+ 和 Facebook-Login，但我无法授予对 http:www.google.de 等外部 URL 的访问权限以进行身份​​验证。

这是我的 angularJS 请求：

$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);
        )
)

在我的 WEB API“WebApiConfig.cs”中，我什至允许启用每个 url cors：

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 
        );
    

但它一直告诉我：

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. 

我什至在我的 webconfig 中添加了 customHeaders。没有成功。

<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>

有没有人知道为什么我的请求一直被拒绝？

【问题讨论】：

试试这个？ ***.com/questions/17756550/angularjs-cors-issues

已经尝试添加 '$httpProvider.defaults.useXDomain = true;和/或删除 $httpProvider.defaults.headers.common['X-Requested-With'];'到我的应用程序配置没有成功。我很绝望我还能做些什么来解决它。

你为什么要对https://www.google.de 进行 HTTP GET 请求？这不是您进行 Google+ 登录的方式。也许它应该是一个重定向？

BTW CORS 标头设置在目标服务器（又名 Google）上，而不是您运行网站的服务器上。

【参考方案1】：

我也在使用 owin 中间件。所以我不得不做一些改变： “WebApiConfig.cs”旧：

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

“WebApiConfig.cs”新：

config.EnableCors();

“startup.cs”我添加了这一行：

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

所以它看起来像这样：

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

        ConfigureOAuth(app);

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

    

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

非常感谢

【参考方案2】：

如果您设置了 config.EnableCors(cors) 则不需要 web.config 中的 customHeader。

从您的 web.config 中删除 all'customHeader。

<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="*" />

我遇到了同样的问题，我用这种方法解决了。