Ошибка заголовка источника контроля доступа при использовании Axios в React Web, ошибка в Chrome

Question

Я делаю вызов API, используя Axios в приложении React Web. Однако я получаю ошибку в 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», но все еще не могу понять, как решить эту проблему. Я не хочу использовать расширение 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 в предварительном ответе

javascript rest reactjs google-chrome axios

23

SeaWarrior404 31 Авг 2017 в 09:58

Answer 1

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

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

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

Но в большинстве случаев лучшим решением было бы конфигурирование a-Reverse-Proxy.html "rel =" nofollow noreferrer "> обратный прокси-сервер , чтобы ваш сервер мог перенаправлять запросы с внешнего интерфейса на внутренний, без включения CORS.

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

12

Vlad Povalii 22 Авг 2019 в 12:06

Answer 2

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

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

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

0

cfnerd 21 Ноя 2018 в 20:21

Answer 3

} , "proxy": "http: // localhost: 8080", "devDependencies": {

Использовать прокси в package.json

-1

Dinesh Naik 5 Мар 2020 в 10:02

Answer 4

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

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

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

4

AMDP 6 Июл 2019 в 18:15

Answer 5

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

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

0

Parthasarathy S 23 Июн 2019 в 11:54

Answer 6

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

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

2

Chuck-Durst 9 Авг 2018 в 13:37

Ошибка заголовка источника контроля доступа при использовании Axios в React Web, ошибка в Chrome

6 ответов

Похожие вопросы

Новые вопросы

javascript