本地Javascript获取Post请求因调用ASP.NET Core 2.2 Web API而失败。CORS已启用

本地Javascript获取Post请求因调用ASP.NET Core 2.2 Web API而失败。CORS已启用,javascript,asp.net-core,cors,Javascript,Asp.net Core,Cors,我正在尝试从静态HTML文件向ASP.NET Core 2.2 Web API发出本地post请求。CORS中间件工作正常,我可以做一个简单的get请求。我最终需要从chrome扩展中发出这个帖子请求。我从一开始就在使用ASP.NET,这是我第一次尝试核心解决方案,我被所有需要克服的障碍所困扰,尤其是这个。我的获取语法有问题吗 以下是我基于此的CORS配置: 已经有一段时间了,但我不确定。WithOriginates(“*”)是一种有效的通配符方式。您尝试过使用.AllowAnyOrigin(

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

以下是我基于此的CORS配置:


已经有一段时间了,但我不确定。WithOriginates(“*”)是一种有效的通配符方式。您尝试过使用.AllowAnyOrigin()吗?更好的是(从安全的角度来看),将WithOrigins与HTML文件所在的实际主机一起使用)。如果它是本地的,那么它将是为HTML页面提供服务的本地主机地址(我假设它与API不同)

例如(其中1234是承载HTML的实际本地端口)


如果AllowAnyOrigin()用于测试,则可以。但不要在生产中使用它。Microsoft认为这是一种不安全的配置(请参阅)。在prod中总是使用命名的origins。

已经有一段时间了,但我不确定。WithOrigins(“*”)是一种有效的通配符方式。您尝试过使用.AllowAnyOrigin()吗?更好的是(从安全的角度来看),将WithOrigins与HTML文件所在的实际主机一起使用)。如果它是本地的,那么它将是为HTML页面提供服务的本地主机地址(我假设它与API不同)

例如(其中1234是承载HTML的实际本地端口)


如果AllowAnyOrigin()用于测试,则可以。但不要在生产中使用它。Microsoft认为这是一种不安全的配置(请参阅)。在产品中总是使用命名起源。

我可能会遇到更多的设计问题。我想从Chrome分机执行这个调用,也就是说在任何地方。限制在几个领域显然不是我想要的。编写Chrome扩展的人如何将数据更新到web服务器?这似乎是一件很平常的事。我遗漏了什么?我按照建议做了这个更改:app.UseCors(builder=>builder.WithOrigins(“).AllowAnyMethod().AllowCredentials().allowyHeader());以下是我在Visual Studio Debig窗口中的响应:Microsoft.AspNetCore.Hosting.Internal.WebHost:Information:Request start HTTP/1.1 OPTIONS Microsoft.AspNetCore.Cors.Infrastructure.Cors:Information:Cors策略执行失败。Microsoft.AspNetCore.Cors.Infrastructure.Cors:Information:Request origin null没有e访问该资源的权限。我没有任何Chrome扩展的经验,因此我恐怕无法在这方面帮助您。您有一点混合设计问题,因为该扩展在浏览器中运行,并且符合COR的安全要求,但它是“托管的”“在扩展中本地,而不是从特定域。作为旁注,请确保包含WithOriginates语句的协议(在开头添加一个http)。我想从Chrome分机执行这个调用,也就是说在任何地方。限制在几个领域显然不是我想要的。编写Chrome扩展的人如何将数据更新到web服务器?这似乎是一件很平常的事。我遗漏了什么?我按照建议做了这个更改:app.UseCors(builder=>builder.WithOrigins(“).AllowAnyMethod().AllowCredentials().allowyHeader());以下是我在Visual Studio Debig窗口中的响应:Microsoft.AspNetCore.Hosting.Internal.WebHost:Information:Request start HTTP/1.1 OPTIONS Microsoft.AspNetCore.Cors.Infrastructure.Cors:Information:Cors策略执行失败。Microsoft.AspNetCore.Cors.Infrastructure.Cors:Information:Request origin null没有e访问该资源的权限。我没有任何Chrome扩展的经验,因此我恐怕无法在这方面帮助您。您有一点混合设计问题,因为该扩展在浏览器中运行,并且符合COR的安全要求,但它是“托管的”“在扩展中本地,而不是从特定域。作为旁注,请确保包含WithOrigins语句的协议(在开头添加http)。您需要更新ASP.Net CORS配置,以发回一个Access Control Allow Headers响应标头,该标头的值中包含“content type”。我不知道如何使用您正在使用的服务器代码来实现这一点,但如果我认为您可以在这里搜索现有答案以查找“ASP.Net访问控制允许标题”,那么您会发现一些东西。我遵循了此网站的代码,他们似乎是这方面的权威。是否知道任何其他具有正确信息的机构?您需要更新ASP.Net CORS配置以发回一个Access Control Allow Headers响应标头,该标头的值中包含“content type”。我不知道如何使用您正在使用的服务器代码来实现这一点,但如果我认为您可以在这里搜索现有答案以查找“ASP.Net访问控制允许标题”,那么您会发现一些东西。我遵循了此网站的代码,他们似乎是这方面的权威。是否知道任何其他具有正确信息的机构?
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).
app.UseCors(builder => builder.WithOrigins("https://localhost:1234"));