Ошибка заголовка заголовка управления доступом с использованием Axios in React Ошибка веб-металирования в Chrome

Я делаю вызов API с помощью Axios в веб-приложении React. Однако я получаю ошибку в Chrome как,

XMLHttpRequest не может загрузить https://example.restdb.io/rest/mock-data. В запрошенном ресурсе нет заголовка "Access-Control-Allow-Origin". Происхождение ' http://localhost: 8080 ', следовательно, не допускается.

    {
      axios.get('https://example.restdb.io/rest/mock-data', {
      headers: { 
      'x-apikey': 'API_KEY',
      },
    responseType: 'json',
     }).then(response => {
      this.setState({ tableData: response.data });
    });
    }

Я также прочитал несколько ответов на StackOverflow об одной и той же проблеме под названием "Access-Control-Allow-Origin", но все же coudnt выясняет, как это решить. Я не хочу использовать расширение IN Chrome или использовать временный хак, чтобы решить эту проблему. Пожалуйста, предложите стандартный способ решения вышеуказанной проблемы.

Пробовав несколько ответов, я попытался с этим,

    headers: { 
      'x-apikey': '59a7ad19f5a9fa0808f11931',
      'Access-Control-Allow-Origin' : '*',
      'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
    },

Теперь я получаю ошибку как,

Поле заголовка запроса Access-Control-Allow-Origin не разрешено заголовками Access-Control-Allow-Headers в предполетном ответе

ОТВЕТЫ

Ответ 1

Если ваш бэкэнд поддерживает CORS, вам, вероятно, нужно добавить к вашему запросу этот заголовок:

headers: {"Access-Control-Allow-Origin": "*"}

[Обновить] Access-Control-Allow-Origin - заголовок ответа, поэтому для включения CORS необходимо добавить этот заголовок в ответ от вашего сервера.

Но в большинстве случаев лучшим решением будет настройка обратного прокси-сервера, чтобы ваш сервер мог перенаправлять запросы от внешнего интерфейса к внутреннему без включения CORS.

Вы можете найти документацию о механизме CORS здесь:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Ответ 2

!!! У меня была похожая проблема, и я обнаружил, что в моем случае withCredentials: true в запросе активировал проверку CORS, в то время как его выдача в заголовке позволит избежать проверки:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMIssingAllowCredentials

не использовать withCredentials: true но установить 'Access-Control-Allow-Credentials':true в заголовках

Ответ 3

Использование заголовка Access-Control-Allow-Origin для запроса не поможет вам в этом случае, пока этот заголовок может использоваться только для ответа...

Чтобы заставить его работать, вы, вероятно, должны добавить этот заголовок в свой ответ. Вы также можете попробовать добавить crossorigin:true заголовка crossorigin:true для вашего запроса.

Ответ 4

Как я понимаю, проблема в том, что запрос отправляется с localhost: 3000 на localhost: 8080, и браузер отклоняет такие запросы, как CORS. Таким образом, решение было создать прокси

Мое решение было:

import proxy from 'http-proxy-middleware'
app.use('/api/**', proxy({ target: "http://localhost:8080" }));

Ответ 5

В узле js (backend) добавьте эти строки для поддержки Access-Control-Allow-Origin,

const express = require('express')
const app = express()
app.use(cors())