Как правильно выполнять вызовы API в развертывании, используя create-реагировать на приложение с expressjs бэкэндом? - PullRequest
Новая
       25

Как правильно выполнять вызовы API в развертывании, используя create-реагировать на приложение с expressjs бэкэндом?

0 голосов
/ 03 марта 2020

Я пытаюсь развернуть реагирующее приложение на сервере.

Когда мое развернутое приложение пытается выполнить вызов API на том же сервере, оно получает следующую ошибку: 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3045/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://xxx.xxx.x.xx:5000’).

Пакет. В файле json указан прокси-сервер: 

  "proxy": "http://localhost:3045",

А вот мой вызов API: 

fetch('/login',
      {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          password
        })
      })).json()

Что меня смутило еще больше, когда я обслуживал сайт с удаленного сервера, обращался к нему со своего локального компьютера и имел серверная часть обслуживалась на моей локальной машине, сайт делал вызовы на свой собственный локальный порт (успешно, как только я заметил, что происходит, и изменил источник конфигурации cors на ip удаленного сервера для тестирования), и получил доступ к обслуживаемому API с моего локального компьютера, а не на его (удаленный сервер развертывания) собственный локальный порт.

Моя конфигурация cors на удаленном сервере api: 

app.use(
  cors({
    origin: 'http://localhost:5000',
    credentials: true,
  }),

Какие изменения мне нужно внести так что мой сайт делает вызовы API для своих локальных портов вместо клиентов?

Ответы [ 2 ]

2 голосов
/ 03 марта 2020

Из памяти (и при аналогичной проблеме) проксирование не означает, что при развертывании не будет работать.

См. Прокси-создание Create-React-App в Production Build

1 голос
/ 03 марта 2020

Попробуйте настроить его без какого-либо специального модуля Cors: 

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5000');//If it doesn't work, change it to "*"
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,token');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});
...