本地 Javascript Fetch Post 请求失败，调用 ASP.NET Core 2.2 Web API。 CORS 已启用

Posted 2023-03-04

【中文标题】本地 Javascript Fetch Post 请求失败，调用 ASP.NET Core 2.2 Web API。 CORS 已启用

【英文标题】：Local Javascript Fetch Post Request Fails with call to ASP.NET Core 2.2 Web API. CORS is enabled

【发布时间】：2019-08-23 04:15:35

【问题描述】：

我正在尝试从静态 html 文件向 ASP.NET Core 2.2 Web API 发出本地发布请求。 CORS 中间件工作正常，我可以做一个简单的获取请求。我最终需要从 chrome 扩展中发出这个帖子请求。我从一开始就一直在使用 ASP.NET，这是我第一次尝试 Core 解决方案，我对所有需要克服的障碍感到困惑，尤其是这个。我的 Fetch 语法有问题吗？

这是我基于此的 CORS 配置： https://enable-cors.org/server_aspnet.html

public class Startup

    public void ConfigureServices(IServiceCollection services)
    
        services.AddCors();

        services.AddMvc()
            .SetCompatibilityVersion(CompatibilityVersion.Version_2_2));
    

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    
        app.UseCors(builder => builder.WithOrigins("*"));

        app.UseMvc(routes =>
        
            routes.MapRoute(
                name: "default",
                template: "controller=Home/action=Index/id?");
        );
    

fetch call in local static html file:
fetch ('http://localhost:49828/Bookmark', 
    method: 'post',
    headers:'Content-Type': 'application/json',
    body: JSON.stringify( ID: 0, Name: 'google', URL: 'google.com', Tags: '' )
)

here's the raw request from Fiddler:
OPTIONS http://localhost:49828/Bookmark HTTP/1.1
Host: localhost:49828
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9

console log from chrome:
Access to fetch at 'http://localhost:49828/Bookmark' from origin 'null' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

console log from firefox:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:49828/Bookmark. (Reason: missing token ‘content-type’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

【问题讨论】：

您需要更新您的 ASP.Net CORS 配置以发送回一个 Access-Control-Allow-Headers 响应标头，该标头的值中包含“content-type”。我不确定如何使用您正在使用的服务器代码执行此操作，但如果您在此处搜索“ASP.Net Access-Control-Allow-Headers”的现有答案，我认为您会找到一些东西。跨度>

我遵循了这个网站的代码，他们似乎是这个主题的权威。知道任何其他具有正确信息的权威吗？ enable-cors.org/server_aspnet.html

【参考方案1】：

已经有一段时间了，但我不确定 .WithOrigins("*") 是否是通配符所有内容的有效方法。您是否尝试过使用 .AllowAnyOrigin() 代替？更好的是（从安全角度来看），将 WithOrigins 与托管 HTML 文件的实际主机一起使用）。如果那是本地的，那么它将是您提供 HTML 页面的本地主机地址（我假设它与您的 API 不同）。

类似于（其中 1234 是您托管 HTML 的实际本地端口）。

app.UseCors(builder => builder.WithOrigins("https://localhost:1234"));

如果 AllowAnyOrigin() 用于测试，很好。但不要在生产中使用它。 Microsoft 认为这是一种不安全的配置（请参阅https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2#set-the-allowed-origins）。在产品中总是使用命名的起源。

【讨论】：

我手头上可能还有更多设计问题。我想从 Chrome 扩展程序执行这个调用，这意味着在任何地方。限制在几个域显然不是我想要的。编写 Chrome 扩展程序的人如何将数据更新到 Web 服务器？这似乎是一件很常见的事情。我错过了什么？

我按照建议进行了此更改： app.UseCors(builder => builder.WithOrigins("localhost:49828") .AllowAnyMethod() .AllowCredentials() .AllowAnyHeader()); 这是我对 Visual 的回复Studio Debig 窗口：Microsoft.AspNetCore.Hosting.Internal.WebHost：信息：请求开始 HTTP/1.1 选项localhost:49828/Bookmark Microsoft.AspNetCore.Cors.Infrastructure.CorsService：信息：CORS 策略执行失败。Microsoft.AspNetCore.Cors.Infrastructure。 CorsService:Information: Request origin null 没有访问资源的权限。

我对 Chrome 扩展程序没有任何经验，所以恐怕无法帮助您。您有一些混合设计问题，因为扩展程序在浏览器中运行并受 CORS 安全要求的约束，但它是在扩展程序本地“托管”而不是来自特定域。作为旁注，请务必包含 WithOrigins 语句的协议（在开头添加 http）。