У меня проблема с 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.
На данный момент я застрял, поэтому любая помощь приветствуется, поэтому спасибо заранее.