Я делаю вызов 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 в предварительном ответе
5 ответов
Если ваш бэкэнд поддерживает 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
} , "proxy": "http: // localhost: 8080", "devDependencies": {
Использовать прокси в package.json
!!! У меня была похожая проблема, и я обнаружил, что в моем случае withCredentials: true в запросе активировал проверку CORS, в то время как его выдача в заголовке могла бы избежать проверки:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMIssingAllowCredentials
Не использовать withCredentials: true но установить 'Access-Control-Allow-Credentials':true в заголовках
В узле js (backend) добавьте эти строки для поддержки Access-Control-Allow-Origin,
const express = require('express')
const app = express()
app.use(cors())
Использование заголовка Access-Control-Allow-Origin для запроса не поможет вам в этом случае, в то время как этот заголовок может использоваться только в ответе ...
Чтобы это работало, вам, вероятно, следует добавить этот заголовок в свой ответ. Вы также можете попробовать добавить заголовок crossorigin:true к вашему запросу.
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.
En Español