Проблема заголовка CORS между реакцией / экспрессом - PullRequest
0 голосов
/ 01 декабря 2019

У меня проблема с CORS, несмотря на чтение и реализацию различных решений для SO.

У меня есть приложение, использующее Express / NodeJS в качестве API и React JS в качестве внешнего интерфейса. В процессе разработки приложение реагирования http://localhost:3000 может общаться с экспресс-бэкэндом http://localhost:9000 с помощью app.use(cors()).

. Сейчас я пытаюсь использовать это приложение в работе.

Обаприложения хранятся в отдельных репозиториях git. React развернут как статический веб-сайт на aws s3 и работает нормально. Узел JS развернут на Elastic Bean Stalk и находится в состоянии готовности. У меня есть база данных Postgres SQL, подключенная к экземпляру ebs (приложение узла), к которому я могу подключиться в pgadmin4.

Оба приложения используют один и тот же базовый домен на маршруте 53 myproject.com.

Оба настроены на прослушивание https / 443. Я могу нажать оба URL https://myproject.com и https://api.myproject.com, и они выглядят так, как они работают в моей среде localhost.

Когда я пытаюсь зарегистрировать пользователя на своем сайте, я сталкиваюсь с этой ошибкой:

Access to XMLHttpRequest at 'https://api.myproject.com/users/signup/' from origin 'https://myproject.com' 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 cors = require('cors');
const logger = require('morgan');
const bodyParser = require('body-parser');
require('dotenv').config();

const PORT = process.env.PORT || 9000; // DEV
const app = express();

const corsOptions = {
  origin: 'https://myproject.com',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}

const allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'https://myproject.com');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
}

app.use(cors());

const { userRouter } = require('./routes/userRouter');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(allowCrossDomain);

app.use((e, req, res, next) => {
  res.header("Access-Control-Allow-Origin", "https://myproject.com");
  res.header('Access-Control-Allow-Methods', 'DELETE, PUT, GET, POST');
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  if (e) {
    console.log(e);
    res.status(500).send(e.message);
  }
  next();
});

app.use('/users', userRouter);

app.listen(PORT, () => {
  console.log(`Express server is listening on PORT ${PORT}.`);
});// - TESTING

Что я пробовал: Большинство из этих решений пришли из этого SOpost: Почему добавление заголовков CORS к маршруту OPTIONS не позволяет браузерам получать доступ к моему API?

Использование только app.use(cors());

Использование подстановочного знака *доменного имени.

Белый список моего домена с cors (из этого поста в блоге): https://daveceddia.com/access-control-allow-origin-cors-errors-in-react-express/

// Set up a whitelist and check against it:
var whitelist = ['https://myproject.com']
var corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

// Then pass them to cors:
app.use(cors(corsOptions));

Я также переместился на app.use(cors()) выше моих маршрутов, как предложено веще один пост StackOverflow.

На данный момент я застрял, поэтому любая помощь приветствуется, поэтому спасибо заранее.

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