Question

我正在使用Angular和ASP.NET Core构建一个网站。

在某些页面上，我想从Web API获取数据。当我运行应用程序时，浏览器（Firefox）显示

跨源请求被阻止：同源策略不允许在...（网址）读取远程资源（原因：CORS预检信道中CORS标题'Access-Control-Allow-Headers'中缺少令牌'授权' ）。

我试过其他浏览器，得到了同样的错误。

出于授权考虑，我使用HttpInterceptor为Angular前端的每个请求插入授权标头。

然后我查看了我的ASP.NET Core后端。我将CORS策略设置为app.UseCors(builder => { builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader(); });，但它仍然不起作用。

我用Postman测试了API，它运行正常。

哪里出错？

Startup.cs文件。

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

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc().AddJsonOptions(
            opt => opt.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
            );

        // In production, the Angular files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });

        services.AddEntityFrameworkSqlServer();
        services.AddCors();
        services.AddSignalR();

        services.AddDbContext<ApplicationDbContext>(opt =>
        {
            opt.UseSqlServer(Configuration.GetConnectionString("Remote"));
        });

        services.AddIdentity<ApplicationUser, IdentityRole>(opts =>
        {
            opts.Password.RequireDigit = true;
            opts.Password.RequireLowercase = true;
            opts.Password.RequireUppercase = true;
            opts.Password.RequireNonAlphanumeric = false;
            opts.Password.RequiredLength = 7;
        }).AddEntityFrameworkStores<ApplicationDbContext>();

        services.AddAuthentication(opts =>
        {
            opts.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
            opts.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
            opts.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
        })
        .AddJwtBearer(cfg =>
        {
            cfg.RequireHttpsMetadata = false;
            cfg.TokenValidationParameters = new TokenValidationParameters()
            {
                ValidIssuer = Configuration["Auth:Jwt:Issuer"],
                ValidAudience = Configuration["Auth:Jwt:Audience"],
                IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["Auth:Jwt:Key"])),
                ClockSkew = TimeSpan.Zero,
                RequireExpirationTime = true,
                ValidateIssuerSigningKey = true,
                ValidateAudience = true
            };
        });

        services.AddAuthorization(options =>
        {
            options.AddPolicy("NonUser", policy => policy.RequireRole("RestrauntOwner", "RestrauntAdmin", "SystemAdmin"));
        });
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }
        app.UseCors(builder => { builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader(); });
        app.UseStaticFiles();
        app.UseSpaStaticFiles();
        app.UseAuthentication();
        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action=Index}/{id?}");
        });
        app.UseSignalR(route =>
        {
            route.MapHub<OrderHub>("/orderhub");
        });
        app.UseCookiePolicy();
        app.UseSpa(spa =>
        {
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
            }
        });
    }
}

这很奇怪。我一直在我的Windows PC上开发这个。我在我的MacBook上克隆了这个项目，它在macOS上运行良好。

Answer 1

行。我发现了什么错，但它有点傻。

我问过网络API提供商。他告诉我，这是因为授权标题是不允许的。

我使用HttpIntercepter将授权标头插入到Angular前端触发的每个请求中。我这样做是为了让我的ASP.NET Core Web API对站点用户进行身份验证。但是开放的网络API不允许这个标题。

如果我没有登录我的网站，它可以正常工作，但如果我执行登录程序，它将获得一个令牌并在请求中插入一个授权，它将触发一个OPTIONS预检请求，，然后请求将被阻止。

这么愚蠢的问题:)我必须找到一种新方法来做到这一点。

Answer 2

如果您不能完全正常工作，请参考以下几点提示：

您的来源必须与浏览器发送的内容完全匹配。

如果是HTTP，则必须输入HTTP，而HTTPS必须是HTTPS。
端口号也必须包括在内并且正确。

http://localhost:5000

https://localhost:5001
因此，如果您使用上述设置，请不要为"http://localhost:5001"设置CORS规则，因为这不是相同的URL！
在浏览器中或Fiddler中查找以使其完全正确，并确保它符合您的期望。如果要在HTTP和HTTPS之间切换，很容易感到困惑。

如果您发送的内容不匹配，您将得到一个204且响应为空

如果您弄错了，它不会向您显示期望的正确数据

标头不区分大小写

如果需要，可以放置"authorization"或"Authorization"或"aUtHoRiZaTiOn"。

您必须包括方法和标头

如果您未使用WithMethods或AllowAnyMethod指定允许的HTTP方法，则将无法使用。这很容易错过-特别是对于GET请求。

如果使用中间件或分支的MVC管道，则可以在该级别添加CORS。

对于app.UseSpa（如果您使用Microsoft的SPA托管机制），您可以这样做

        app.UseSpa(spa =>
        {
            // see https://go.microsoft.com/fwlink/?linkid=864501

            // CORS just for the SPA
            spa.ApplicationBuilder.UseCors(builder =>
            {
                // Must specify Methods
                builder.WithMethods("GET");

                // Case insensitive headers
                builder.WithHeaders("AuthoriZatioN");

                // Can supply a list or one by one, either is fine
                builder.WithOrigins("http://localhost:5000");
                builder.WithOrigins("https://localhost:5001");
            });

提琴手很有用

Fiddler将为您显示CORS成功的必要条件。这是authorization标头和GET方法。

您可以在更改服务器配置后按上一个请求的R重新运行它。这样，您就不必继续启动浏览器。

请确保在响应部分查看Headers，因为即使成功，实际内容也将是0字节。

Answer 3

此错误背后的原因是：您的客户端项目和webapi位于不同的域（或端口）。

浏览器安全性可防止网页向另一个域发出AJAX请求。此限制称为同源策略，可防止恶意站点从其他站点读取敏感数据。

要为您的应用程序设置CORS，请将 Microsoft.AspNetCore.Cors 包添加到您的项目中。

然后使用中间件启用CORS：在启动时＆gt; ConfigureServices方法

    //For any origin
    public void ConfigureServices(IServiceCollection services)
    {
         services.AddCors(options =>
         {
            options.AddPolicy("AllowSpecificOrigin",
                builder1 => builder1.WithOrigins("http://web.user.local:44352"));
        });
    }

在Configure方法中：

      public void Configure(IApplicationBuilder app)
      {          

            // Shows UseCors with named policy.
            app.UseCors("AllowSpecificOrigin");

            //...rest
      }

注意：必须指定URL而不使用尾部斜杠（/）。如果URL以/结尾，则比较将返回false，并且不会返回任何标头。

了解更多信息read here

跨源请求被阻止 - 使用Angular和ASP.NET Core构建的应用程序

3 个答案: