Невозможно отправить запрос в React App из-за CORS, даже если CORS включен на моем сервере - PullRequest
0 голосов
/ 25 января 2020

Вот как я настраиваю свой сервер

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const morgan = require('morgan');

const app = express();
const port = 3000;

app.use(cors());
app.use(bodyParser.json());
app.use(morgan(':method :url :status :res[content-length] - :response-time ms'));

Теперь я представляю, что, поскольку я использовал пакет cors и у меня он включен для всех источников, мои запросы будут go через в моем приложении. Ну, это не так, потому что каждый раз, когда я пытаюсь отправить запрос на сервер, это вызывает ошибку CORS.

Интересный обход, который я использую: я запускаю свой сервер через порт 3000 ( порт CRA). Если я сначала запускаю сервер, а затем запускаю свое приложение React, CRA предложит мне переключиться на другой порт. Теперь я могу отправлять запросы на мой сервер без хлопот CORS. Однако как правильно включить CORS в моем приложении?

Полная ошибка из браузера:

TypeError: "NetworkError when attempting to fetch resource.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/accounts. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/accounts. (Reason: CORS request did not succeed).

ОБНОВЛЕНИЕ: У меня

app.use(function (req, res, next) { 
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
})

на моем сервере, но по какой-то причине, когда ответ отправляется, у него нет заголовков?

1 Ответ

0 голосов
/ 25 января 2020

??‍? Попробуйте использовать на своем сервере:

const cors = require('cors');
app.use(cors({ origin: '*'}));

? Убедитесь, что при вызове конечной точки из приложения React, не используйте: localhost, но используйте: http://localhost.

Надеюсь, это поможет вам ?.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...