Как настроить сервер для React+Express?

Question

[KlassT]

Есть бекенд, написанный на express и работающий на порту 3000. Есть фронтенд на react+redux на порту 8080. При попытке получения данных с апи бекенда говорит, что запрещен доступ с разных портов. При запуске на одном порту по / срабатывает бекенд. Пытался настроить cors, но и это не увенчалось успехом. Может есть, где описана данная проблема и как ее решить?

Answer 1

[Антон Антон]

node :

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

Comments

[KlassT]

На клиенте будет достаточно просто сделать запрос?

[Антон Антон]

KlassT: на клиенте надо тоже указывать CORS, для jquery примерно так:

var ajaxSettings = {
			method: form.method,
			url: form.action,
			data: JSON.stringify(data),
			//					dataType: form.method === 'get' ? 'jsonp' : 'json',
			dataType: 'json',
			contentType: 'application/json',
			processData: false,
			xhrFields: {
				withCredentials: true
			}
		};
		var ajaxRequest = $.ajax(ajaxSettings);

Answer 2

[Иван]

Nginx Reverse Proxy

Answer 3

[Denis Sakharov]

Лучше сразу настроить серверный рендеринг приложения (можно подсмотреть здесь) и собирать фронтенд перед деплоем. В таком случае отпадает необходимость стартовать сервер с фронтендом на отдельном порту и для работы всего приложения нужно будет запустить только express.

По деплою node.js приложения есть хорошая инструкция на оф. сайте Passenger