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

.WithOrigins("http://www.thomasleoblok.dk/")这就是您的问题所在，应该是.WithOrigins("http://www.example.com")，因为它是example.com，您要允许发出请求，它要允许任何站点都可以将其更改为{ {1}}

Answer 2

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

Answer 3

如果您在本地尝试，则必须打开源localhost，否则BE始终会以 localhost ！= http://www.thomasleoblok.dk/

的形式返回cors错误。

为了进行测试，建议您启用 AllowAnyOrigin（） 示例：

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

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

3 个答案: