AspNetCore 上 localhost 的 CORS 策略阻止

Posted 2023-02-22

【中文标题】AspNetCore 上 localhost 的 CORS 策略阻止

【英文标题】：CORS policy blocking for localhost on AspNetCore

【发布时间】：2020-05-22 22:19:40

【问题描述】：

我正在尝试使用 AspNetCore，但我被困在了这个问题上。当我使用邮递员发送请求时，一切正常，但是当我尝试使用浏览器发送请求时，它不起作用。我正在使用 AspNetCore 3.1。

Startup.cs

namespace PMES.HelpDesk.WebAPI

    public class Startup
    
        public Startup(IConfiguration configuration)
        
            Configuration = configuration;
        

        public IConfiguration Configuration  get; 

        public void ConfigureServices(IServiceCollection services)
        
            //...

            services.AddCors(opt => 
            
                opt.AddPolicy("AllowOrigin", options => 
                    options.AllowAnyOrigin();
                    options.AllowAnyMethod();
                    options.AllowAnyHeader();
                );
             );

           //...
        


        public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ILoggerFactory loggerFactory)
        
            if (env.IsDevelopment())
            
                app.UseDeveloperExceptionPage();
                IdentityModelEventSource.ShowPII = true;

            
            else
            
                app.UseHsts();
            

            app.UseHttpsRedirection();
            app.UseRouting();
            app.UseCors("AllowOrigin");
            app.UseAuthentication();
            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            
                endpoints.MapControllers();
            );
        
    

错误信息

从源“http://localhost:8080”对“http://localhost:5000/api/session/authenticate”处的 XMLHttpRequest 的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：预检请求不允许重定向。

编辑 1

我的前端是用 Vue 构建的，这是我的要求

axios
.get(`http://localhost:5000/api/session/authenticate`, 
    headers: 
        Authorization:
            'Bearer ' +
             'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMTQ0NjE3Nzc0MiIsIm5hbWUiOiJGZWxpcGUgRW5kbGljaCIsImlhdCI6MTUxNjIzOTAyMiwiZXhwIjoxNTk2MzM5MDIyfQ._VcxTFt6N0oe-QKeyant8lCzcpC2AL69tFcADLBbXO0'
    
)
.then(response => 
    window.console.log(response.data);
)
.catch(error => 
    window.console.log(error);
);

编辑 2

当我发送邮递员请求时，我会收到这些标头

Date: Thu, 06 Feb 2020 20:08:11 GMT
Server: Kestrel
Content-Length: 0
Allow: GET
Access-Control-Allow-Origin: *

【问题讨论】：

你的前端是用什么构建的？

我的前端是用Vue构建的

你在本地使用 HTTPS 吗？

这个问题的答案是否适合您？ ***.com/questions/40863417/cors-issue-with-vue-js

@Dai 项目是脚手架的，我只是没有评论这一行。

【参考方案1】：

您的OPTIONS 请求正常，但请注意以下问题： https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials

在底层 AJAX 控制器上将 withCredentials 设置为 true 时，不能中断 CORS。看起来axios 不支持它。看： https://github.com/axios/axios/pull/2582

无论如何，我都不会尝试破解它。您有两种解决方案：

将特定域应用到您的 CORS localhost:8080 在您的 Vue CLI 上启用 VUE 代理 https://vuejs-templates.github.io/webpack/proxy.html

我肯定会推荐第二个，这样可以避免你用 CORS 破解后端

【讨论】：

非常感谢。它奏效了，而且更重要的是，现在我知道为什么了。