Блог

Главная - Вопросы по программированию - Нет ошибки CORS при выполнении запросов GET, но ошибка CORS при выполнении запросов POST

Нет ошибки CORS при выполнении запросов GET, но ошибка CORS при выполнении запросов POST

#node.js #reactjs #post #get #cors

#node.js #reactjs #Публикация #получить #cors

Вопрос:

У меня есть сервер Node / Express, который взаимодействует с приложением React.

Мне нужно сделать запросы POST и GET, проблема в том, что при выполнении запросов POST я получаю ошибку CORS, обычную:

 Access to fetch at 'http://localhost:9000/testAPI' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

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

Я также не хочу использовать хаки, такие как расширения CORS или пакеты npm. Я хочу использовать CORS.

На стороне сервера выглядит так:

 const express = require("express");
const router = express.Router();

router.get("/", (req, res, next) => {
    console.log(req.url);

    res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
    res.send("API is working properly");
});

module.exports = router;

В приложении React запрос GET выглядит так (работает просто отлично):

 const res = await fetch('http://localhost:9000/testAPI');

console.log(res);

Запрос POST выглядит так (ошибка CORS):

 const res = await fetch('http://localhost:9000/testAPI', {
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ someData: "POST requests are working properly" })
});

Нужно ли указывать некоторые дополнительные заголовки или свойства в запросе POST? Или мне нужно что-то изменить на стороне сервера?

Если у меня не будет этой проблемы при запуске, я не против использовать такой хак, как CORS extension.

Комментарии:

1. также установите заголовок для запроса POST и используйте тот же порт localhost: 9000 localhost:3000 имеет другое происхождение

2. Надеюсь, я все сделал правильно : const res = await fetch('http://localhost:9000/testAPI', { method: 'POST', mode: 'cors', cache: 'no-cache', headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': 'http://localhost:9000' }, body: JSON.stringify({ someData: "POST requests are working properly" }) }); . К сожалению, не сработало. Пожалуйста, скажите мне, хотите ли вы, чтобы я сделал что-то еще.

3. Попробуйте 'Access-Control-Allow-Origin': '*'

4. Не сработало. Спасибо

5. @LucianAnghel Перво-наперво: убедитесь, что вы прочитали и поняли developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Ответ №1:

Вы можете использовать этот пакет cors

 // Install
npm install cors
yarn add cors
 
     // server.js 
    const express = require('express');
    const cors = require('cors');
    const app = express();
    
    // global middleware
    app.use(cors());
    // You can use route based middleware too
    router.post("/", cors(), (req, res, next) => {
     // process request amp; send response to client
    });
Метки: ,