Как исправить ошибку CORS в моем запросе axios в приложении nextjs
Итак, я получаю эту ошибку при попытке сделать вызов axios для моего API на другом локальном хосте. Как я могу это исправить. Я использую Nextjs, ts и axios.
Вот функция (она плохо написана, просто для тестирования пока):
const GetPartners = (e: { preventDefault: () => void; }) => {
e.preventDefault();
let token: string =
"//This is normally correct just changed for question";
axios
.get(
"http://localhost:7071/api/Partners",
{
headers: {
Authorization: "Bearer " + token,
},
}
)
.then(res => console.info(res.data));
}
return (
<div className = {styles.container}>
<button onClick = {GetPartners}>Get Partners</button>
</div>
);
};
export default Home;
и ошибка:
Access to XMLHttpRequest at 'http://localhost:7071/api/Partners' from origin 'http://localhost:3000' 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.
Ответы 3
У вас есть доступ к http://localhost:7071 ? если это так, для этого приложения необходимо установить либо разрешать все подстановочные знаки localhost*, либо Access-Control-Allow-Origin: http://localhost:3031 в заголовке.
Это не имеет ничего общего с вашим запросом, но с ответом хоста, разрешающим ваш запрос.
Если у вас нет контроля над этим приложением в этой или другой среде, то использование прокси для перезаписи может быть другим вариантом.
Подробнее ознакомиться с темой можно здесь
A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers.
Итак, в вашем случае, когда вы делаете запрос от localhost:3000 к localhost:7071, источник отличается, поэтому выполняется предварительный запрос.
Этот запрос завершается с ошибкой, потому что вы, возможно, не разрешили принимать запросы из разных источников на сервере localhost:7071, или мы можем сказать, что вы не включили CORS на этом сервере.
Если вы используете сервер NodeJS и промежуточное ПО ExpressJS, вы можете легко включить CORS с помощью ПО промежуточного слоя CORS. Вам просто нужно сделать следующее:
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
Но остерегайтесь последствия использования CORS в производственной среде, поэтому вы должны использовать его либо только в режиме разработки, либо с осторожностью в производственной среде.
В итоге я это исправил. Я добавил этот фрагмент кода в свой файл local.settings.json, и он исправил его, надеюсь, кто-то найдет это полезным!
"Host": {
"CORS": "*"
}