本地Javascript提取发布请求因调用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

问题描述

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

I'm trying to make a local post request from a static HTML file to an ASP.NET Core 2.2 Web API. CORS middle-ware is working fine, I can do a simple get request. I ultimately need to make this post request from within a chrome extension. I've been using ASP.NET since the beginning, this is my first attempt at a Core solution, I'm boggled by all the hurdles to overcome, especially this one. Is there something wrong with my Fetch syntax?

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

Here's my CORS configuration based on this: 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).

推荐答案

已经有一段时间了，但我不确定.WithOrigins（ *）是通配符所有内容的有效方法。您是否尝试过使用.AllowAnyOrigin（）？甚至更好（从安全角度考虑），将WithOrigins与HTML文件所在的实际主机一起使用。如果这是本地地址，那么它将是您从中提供HTML页面的本地主机地址（我认为它与您的API不同）。

It's been a while, but I am not sure that .WithOrigins("*") is a valid way to wildcard everything. Have you tried using .AllowAnyOrigin() instead? Even better (from a security standpoint), use WithOrigins with the actual host of where the HTML file is hosted). If that is local, then it would be the localhost address you are serving the HTML page from (which I assume is different than you API).

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

So something like (where 1234 is the actual local port you are hosting the HTML from).

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

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

If AllowAnyOrigin() works for testing, fine. But don't use it in production. Microsoft considers this an insecure configuration (see https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2#set-the-allowed-origins). Always used named origins in prod.

这篇关于本地Javascript提取发布请求因调用ASP.NET Core 2.2 Web API而失败。启用了CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！