Опубликовать запрос от приложения Vue, заблокированного политикой CORS

Question

Я пытаюсь вызвать мой C# web-api из моего Vue веб-приложения, но я сталкиваюсь со следующей ошибкой:

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.

Следующий фрагмент кода показывает, как я звоню остальным -api с использованием axios.

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)
    }
}

Веб-API с методом запроса POST выглядит следующим образом:

[EnableCors("VueCorsPolicy")]
[Route("api/[controller]")]
[ApiController]
public class MyController : ControllerBase
{
   [HttpPost]
   public async Task<int> Post([FromBody] Data data)
   {
       // stuff
   }
}

Я также добавил CORS к своим "ConfigureServices" "метод в файле Startup.cs.

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

И, наконец, я также добавил метод" Настроить "в файле Startup.cs:

app.UseCors("VueCorsPolicy");

Answer 1

если вы пытаетесь выполнить локально, вы должны открыть исходный локальный хост, иначе ВЕ всегда будет возвращать ошибку cors как локальный ! = http://www.thomasleoblok.dk/

для тестирование Я предлагаю вам включить AllowAnyOrigin () пример:

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

Answer 2

.WithOrigins("http://www.thomasleoblok.dk/") здесь ваша проблема, это должно быть .WithOrigins("http://www.example.com"), поскольку это example.com, вы хотите разрешить делать запросы, если вы хотите разрешить любой сайт, вы можете изменить его на .WithOrigins("*")

Answer 3

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