AspNetCore 上 localhost 的 CORS 策略阻止

Question

我正在尝试使用 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: *

Answer 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 破解后端