reactjs - .NET Core webapp 服务 SPA : Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

最基本的问题是:

如果来自浏览器的常规 GET 或来自 Postman 的常规 GET 请求，我的“/api/users/githublogin”端点工作正常。但是，XHR、fetch 和 axios 都抛出相同的错误:

Access to fetch at 'https://github.com/login/oauth/authorize?etc' (redirected from 'https://localhost:5001/api/users/githublogin') from origin 'https://localhost:5001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

---

那里有几个相关的问题，与 Angular 的关系比与 React 的关系更多，但问题似乎是一样的:

Enable CORS in ASP .NET Core 2.1 Web Api

No 'Access-Control-Allow-Origin' header is present. XmlHttpRequest

.NET CORE 2.0 Angular 5: Allowing Cors

Local Javascript Fetch Post Request Fails with call to ASP.NET Core 2.2 Web API. CORS is enabaled

我实现了他们的答案但没有成功。

---

以下是关于 CORS 策略的服务器端代码:

在 ConfigureServices 方法中:

            services.AddCors();

在配置方法中:

app.UseCors(x => x
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowAnyOrigin()
                .AllowCredentials());

在我的客户端，一个按钮调用这段代码:

fetch('/api/users/githublogin');

---

以下是请求失败时的服务器日志:

info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET https://localhost:5001/api/users/githublogin application/json 
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/1.1 GET https://localhost:5001/api/users/githublogin application/json 
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[0]
      Executing endpoint 'web_server.Controllers.UsersController.GitHubLogin (web-server)'
Microsoft.AspNetCore.Routing.EndpointMiddleware:Information: Executing endpoint 'web_server.Controllers.UsersController.GitHubLogin (web-server)'
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[3]
      Route matched with {action = "GitHubLogin", controller = "Users"}. Executing controller action with signature Microsoft.AspNetCore.Mvc.ActionResult GitHubLogin(System.String) on controller web_server.Controllers.UsersController (web-server).
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Route matched with {action = "GitHubLogin", controller = "Users"}. Executing controller action with signature Microsoft.AspNetCore.Mvc.ActionResult GitHubLogin(System.String) on controller web_server.Controllers.UsersController (web-server).
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[1]
      Executing action method web_server.Controllers.UsersController.GitHubLogin (web-server) - Validation state: Valid
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Executing action method web_server.Controllers.UsersController.GitHubLogin (web-server) - Validation state: Valid
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Executed action method web_server.Controllers.UsersController.GitHubLogin (web-server), returned result Microsoft.AspNetCore.Mvc.ChallengeResult in 0.7161ms.
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[2]
      Executed action method web_server.Controllers.UsersController.GitHubLogin (web-server), returned result Microsoft.AspNetCore.Mvc.ChallengeResult in 0.7161ms.
info: Microsoft.AspNetCore.Mvc.ChallengeResult[1]
      Executing ChallengeResult with authentication schemes ().
Microsoft.AspNetCore.Mvc.ChallengeResult:Information: Executing ChallengeResult with authentication schemes ().
info: Microsoft.AspNetCore.Authentication.OAuth.OAuthHandler`1[[Microsoft.AspNetCore.Authentication.OAuth.OAuthOptions, Microsoft.AspNetCore.Authentication.OAuth, Version=2.2.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]][12]
      AuthenticationScheme: GitHub was challenged.
Microsoft.AspNetCore.Authentication.OAuth.OAuthHandler`1[[Microsoft.AspNetCore.Authentication.OAuth.OAuthOptions, Microsoft.AspNetCore.Authentication.OAuth, Version=2.2.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]]:Information: AuthenticationScheme: GitHub was challenged.
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[2]
      Executed action web_server.Controllers.UsersController.GitHubLogin (web-server) in 76.0766ms
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[1]
      Executed endpoint 'web_server.Controllers.UsersController.GitHubLogin (web-server)'
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Executed action web_server.Controllers.UsersController.GitHubLogin (web-server) in 76.0766ms
Microsoft.AspNetCore.Routing.EndpointMiddleware:Information: Executed endpoint 'web_server.Controllers.UsersController.GitHubLogin (web-server)'
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 145.364ms 302 
      Request finished in 145.364ms 302 

与 CORS 无关。事实上，在整个服务器日志中，只有这么多提到它:

warn: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[11]
      The CORS protocol does not allow specifying a wildcard (any) origin and credentials at the same time. Configure the policy by listing individual origins if credentials needs to be supported.
Microsoft.AspNetCore.Cors.Infrastructure.CorsService:Warning: The CORS protocol does not allow specifying a wildcard (any) origin and credentials at the same time. Configure the policy by listing individual origins if credentials needs to be supported.
info: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[4]
      CORS policy execution successful.
Microsoft.AspNetCore.Cors.Infrastructure.CorsService:Information: CORS policy execution successful.

---

现在，在我看来，我的服务器似乎正在正确执行它应该执行的操作。 302 Found(如果我没记错的话)基本上是向客户端发出重定向到该 github 端点的信号。因此，如果我的服务器没有向请求抛出与 CORS 相关的异常(或者无论如何有效)，并且实际上设置了 AllowAnyOrigins 标志，为什么客户端会收到此错误？为什么在浏览器发起GET请求时收不到？

我应该注意到这是一个开发服务器。在文档的鼓励下，我正在使用 spa.UseProxyToSpaDevelopmentServer("http://localhost:3000"); 选项。这是我能想到的一件事让我感到困惑，从技术上看，请求来自跨源(从端口:3000 到端口:5001)，但我相信考虑到 AllowAnyOrigins 标志，这应该不是问题。

该 api 是根据基本的 ASP.NET Core 2.2 webapi 模板构建的。客户端是用 create-react-app 构建的。他们都是非常样板的。

任何人都可以帮助阐明其中的任何一个吗？

Answer 1

Here follows my server side code concerning the CORS policy...

这无关紧要，因为您正在向 GitHub 服务器发出请求。 GitHub 的服务器策略是唯一与此处相关的策略，您无法控制它。

My '/api/users/githublogin' endpoint works fine if requested by a regular GET from the browser, or a regular GET from Postman.

正确，那是因为您拥有“/api/users/githublogin”，而您不拥有https://github.com/login/oauth/authorize?etc .

CORS 确实被 GitHub 设计锁定:https://github.com/isaacs/github/issues/330

---

解决方法:

• 由于 CORS 仅在浏览器范围内发挥作用，因此请重新设计您的架构并实现您自己的服务器端 Web 代理，以便在服务器端调用 GitHub；不是浏览器中的客户端。

这里有一些关于 CORS 的更多资源:

• https://medium.com/@baphemot/understanding-cors-18ad6b478e2b
• https://www.sitepoint.com/working-around-origin-policy/
• Creating a proxy to another web api with Asp.net core