来自 Vue 应用程序的发布请求被 CORS 策略阻止

Posted 2023-03-04

【中文标题】来自 Vue 应用程序的发布请求被 CORS 策略阻止

【英文标题】：Post request from Vue application blocked by CORS policy

【发布时间】：2020-08-15 02:34:25

【问题描述】：

我正在尝试从我的 Vue web 应用程序调用我的 C# web-api，但遇到以下错误：

Access to XMLHttpRequest at 'http://www.api.example.com/' 
from origin 'http://www.example.com' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

以下代码 sn-p 显示了我如何使用 axios 调用 rest-api。

import axios from 'axios'

const client = axios.create(
    baseURL: 'http://www.api.example.com',
    json: true,
    withCredentials: true
)

export default 
    async execute(method, resource, data) 
        return client(
            method,
            url: resource,
            data,
            headers: 
        ).then(req => 
            return req
        )
    ,

    myFunc(data) 
        return this.execute('post', '/', data)
    

带有POST请求方式的web-api如下：

[EnableCors("VueCorsPolicy")]
[Route("api/[controller]")]
[ApiController]
public class MyController : ControllerBase

   [HttpPost]
   public async Task<int> Post([FromBody] Data data)
   
       // stuff
   

我还在 Startup.cs 文件中的“ConfigureServices”方法中添加了一个 CORS。

services.AddCors(options =>

    options.AddPolicy("VueCorsPolicy", builder =>
    
       builder
       .WithOrigins("http://www.example.com")
       .AllowAnyHeader()
       .AllowAnyMethod()
       .AllowCredentials();
    );
);

最后我还在 Startup.cs 文件中添加了“配置”方法：

app.UseCors("VueCorsPolicy");

【参考方案1】：

CORS 是一种安全机制，无法通过简单地修改代码来克服。必须设置服务器，以便它允许来自您的源的请求 - 因此，如果您控制服务器，您就可以做到。

但是，有一些解决方案可以在开发阶段为您提供帮助，例如 cors-anywhere.herokuapp.com。

您应该在代码中的 baseURL 之前添加它，如下所示：

baseURL: 'https://cors-anywhere.herokuapp.com/http://www.api.example.com'.

这不是生产解决方案，仅用于开发。

您可以托管自己的 cors-anywhere 应用程序，更多信息：https://www.npmjs.com/package/cors-anywhere

【讨论】：

作为自己的API问题的代理是极其不安全的，绝对建议去修改后端，这个答案（恕我直言）是越轨的，请删除

.WithOrigins("http://www.thomasleoblok.dk/") 这是你的问题所在，它应该是.WithOrigins("http://www.example.com")，因为它是example.com 你想允许发出请求，你想允许任何你可以改变它的网站.WithOrigins("*")

【参考方案2】：

.WithOrigins("http://www.thomasleoblok.dk/")这是你的问题所在，它应该是.WithOrigins("http://www.example.com")，因为它是你想要允许发出请求的example.com，你想要允许任何网站你可以将它更改为.WithOrigins("*")

【讨论】：

首先我尝试更改特定的网址，但遗憾的是它没有用。然后我尝试将其更改为.WithOrigins("*")，但仍然出现相同的错误。

当 .WithOrigins("*") 时，您不包括此 .AllowCredentials()，因为如果 Access-Control-Allow-Credentials 标头存在，则将来源设置为“*”（所有来源）无效。阅读更多来自here

你使用的是哪个版本的 asp .net core @Thomas Leo Blok

我使用.net core 3.1

我上一次用asp .net core是2.2的时候，我查3.1的文档看看

【参考方案3】：

如果您在本地尝试，则必须打开源 localhost，否则 BE 将始终返回 cors 错误为 localhost ！= http://www.thomasleoblok.dk/

为了测试我建议你启用 AllowAnyOrigin() 示例：

services.AddCors(options =>

    options.AddPolicy("VueCorsPolicy", builder =>
    
       builder
       .AllowAnyOrigin()
       .AllowAnyHeader()
       .AllowAnyMethod()
       .AllowCredentials();
    );
);