向 ASP.NET Core Web API 发出发布请求时，跨域请求被阻止

Posted 2023-03-04

【中文标题】向 ASP.NET Core Web API 发出发布请求时，跨域请求被阻止

【英文标题】：Cross-Origin Request Blocked when making post request to ASP.NET Core Web API

【发布时间】：2019-04-09 07:08:44

【问题描述】：

我有一个包含 2 个控制器的 Web API，并且我在 Startup 类中启用了 Cors，这是我的 ConfigureServices 方法：

public void ConfigureServices(IServiceCollection services)
        
            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

            services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
            
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            ));
            services.AddAutoMapper();
        

这里是配置方法：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

    if (env.IsDevelopment())
    
        app.UseDeveloperExceptionPage();
    
    else
    
        app.UseHsts();
    

    app.UseCors(
        options => options.AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader()
    );

    app.UseHttpsRedirection();
    app.UseMvc();

现在，我有两个控制器。当我向此方法发出GET 请求时，一切正常：

[Route("api/[controller]")]
[ApiController]
[EnableCors("MyPolicy")]
public class MovieController : ControllerBase

    public async Task<IActionResult> Get()
    
        HttpClient httpClient = new HttpClient();

        var responseMessage = await httpClient.GetAsync("https://copafilmes.azurewebsites.net/api/filmes");

        if (!responseMessage.IsSuccessStatusCode) return null;

        var jsonResult = await responseMessage.Content.ReadAsStringAsync();

        return Ok(jsonResult);
    

现在，当我尝试为这个创建 POST 时：

[Route("api/[controller]")]
[ApiController]
[EnableCors("MyPolicy")]
public class CupController : ControllerBase

    private readonly IMapper mapper;

    public CupController(IMapper mapper)
    
        this.mapper = mapper;
    

    [HttpPost]
    public IActionResult Post([FromBody] IEnumerable<MovieViewModel> moviesViewModel)
    
        var movies = mapper.Map<IEnumerable<Movie>>(moviesViewModel).ToList();

        var cup = new Cup(movies);
        cup.Run();

        return Ok(cup.Id);
    

然后我在浏览器控制台中得到消息：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://worldcupapi-gabs.azurewebsites.net/api/cup. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

我正在尝试通过一个简单的 Vuejs 应用来发这篇文章，你可以在这里试试：https://codesandbox.io/s/j23np20663

只需选择 8 张卡片（点击它们，它们会变成灰色），然后点击“提交”按钮。

【问题讨论】：

这是一个令人惊讶的常见red herring - 未设置 CORS 标头的原因是您的服务器抛出错误并返回 500 状态代码。抛出错误时，CORS 标头未设置（这将在 2.2 中更改）。您需要调查为什么您的服务器会抛出错误并暂时忽略 CORS 方面。

是的，就是那个@KirkLarkin！想要回答以便我接受？

这里也一样。有很多这样的问题出现了，所以现在你的问题已经解决了，删除可能是最好的选择。

【参考方案1】：

Serpent5 在上面提供了一个有效的答案；我将其添加为答案，因为这是我在搜索我的 CORS 问题时遇到的第一个问题，而且我的问题的原因并不完全是 Serpent5 所指出的，但扩展他的评论提供了答案。

Serpent5 的回答基本上是说另一个错误是阻止服务器正确响应（例如 500 内部服务器错误），但浏览器开发工具控制台显示的是 CORS 错误。

在我的情况下，这是因为我没有在服务器上正确配置 https。