Проблема ExpresJS Cors: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin»
Из того, что я исследовал, моя конфигурация должна быть в порядке и не иметь проблем с cors. Когда я делаю почтовый запрос, используя axios от localhost: 3000 до моего API на localhost: 8000, я вижу следующее сообщение об ошибке:
Access to XMLHttpRequest at 'http://localhost:8000/api/tags/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Итак, вот моя настройка конфигурации server.js:
const express = require('express');
const next = require('next');
const cors = require('cors');
const bodyParser = require('body-parser');
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Credentials", true);
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
next();
});
server.use(bodyParser.json()); // support json encoded bodies
server.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies
server.use(cors({
origin: '*',
credentials: true,
}));
server.all('*', (req, res) => {
return handle(req, res);
});
server.listen(port, (err) => {
if (err) throw err;
console.info(`> Ready on http://localhost:${port}`);
});
});
В основном я пытаюсь сделать запрос из моего приложения next.js, которое находится на порту 3000, на мой сервер laravel/api на порту 8000. Может ли кто-нибудь увидеть мою проблему?
Вы указали OPTIONS в качестве допустимого метода запроса, но неправильно настроили свой сервер для обработки запросов OPTIONS. Отправляемый вами запрос требует предварительной проверки? Кроме того, если вы используете ПО промежуточного слоя cors, вам не нужно устанавливать заголовки самостоятельно. Промежуточное ПО cors сделает это за вас, вам просто нужно настроить его с помощью параметров.
хорошо, мой экспресс-сервер js находится на порту 3000, и у меня есть сервер laravel, запущенный на порту 8000.
а вы делаете запрос от 3000 до 8000, да?
Похоже, вы настраиваете CORS не на том сервере.
Исправьте Кевен Б, от 3000 до 8000. Какой будет правильная конфигурация? Вот где я потерялся.
Вы настроили его, используя как setHeader, так и промежуточное ПО cors, выберите одно или другое. Первый неправильно обрабатывает запросы OPTIONS, и вы не можете использовать «*» для запросов с учетными данными, а со вторым у вас все еще есть проблема с «*». но ни одна из этих вещей не вызовет ошибку, которую вы видите, потому что ошибка исходит от запроса к laravel, а не к node.js.
Ответы 1
Вы немного неправильно поняли концепцию заголовков CORS. Эти заголовки должны быть указаны на стороне сервера, вы устанавливаете их на стороне клиента (NodeJs).
Поэтому, если вы установите заголовки в приложении Laravel в вашем случае, все должно быть в порядке. Я не в Laravel, но я уверен, что есть встроенная функция или пакет, который сделает это за вас. Советую еще немного почитать про CORS, https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Я вижу, тогда я был совершенно неправ, я думал, что из-за заголовков состояния проблемы моему приложению nodejs необходимо установить правильные заголовки, чтобы разрешить ему доступ к моему laravel API. Я вернусь и научусь :)
Итак, в основном мой сервер nodejs может отправлять любые заголовки, которые он хочет, верно? но приложение laravel нужно настроить для приема запроса nodejs @n9iels?
Да, вот так. Если быть немного точнее, приложение Laravel сообщает вашему браузеру, что разрешено выполнять к нему запрос с указанными заголовками.
ааа ладно тогда я был совершенно не на том пути. Спасибо!
В вашем фрагменте кода вы используете порт
3000, но этот фрагмент выглядит для меня как сервер. Однако вы говорите, что ваш API находится на порту8000. Не могли бы вы немного пояснить?