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

Question

我正在尝试从我的 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.

以下代码片段显示了我如何使用 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");

Answer 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