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

Question

Я создал интерфейсное приложение с помощью creat-реакции-app .
Команда " npm run start " может создать webpack-dev-сервер и обслуживать мой
приложение для разработки.Вот проблема:

1. Мое приложение переднего плана должно запросить api с сервера узлов , который я создал ранее.
2. По умолчанию create-реакции-приложение запускает webpack-dev-сервер на порт 3000
3. Мой сервер узлов был запущен на порт 3001
4. Доступ к порту 3001 напрямую может вызвать проблемы с несколькими источниками

Как я могу изящно начать свою историю развития с этих проблем!

Answer 1

Существует два способа решения проблем с несколькими источниками на сервере узлов,

1. Использование модуля узла cors

Сначала установите модуль Cors. npm install cors

, а затем используйте его внутри своего приложения

const Express       = require("express");
const BodyParser    = require("body-parser");
const Cors          = require("cors");

const app = Express();
app.use(Cors());

app.use(BodyParser.urlencoded({ extended: false }));
app.use(BodyParser.json());

app.listen(3001, 'localhost', (err) => {
    if(err) {
        console.log(err);
        process.exit(-1);
    }
    console.log("Server listen port 8083");
});

2. просто используйте следующие заголовки

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

Answer 2

Простой способ справиться с CORS с бэкэндом NodeJS - это использовать промежуточное программное обеспечение ExpressJS и расширение «cors», как подробно описано в документации ExpressJS:

Руководство по ExpressJS CORS

Для целей тестирования существуют различные расширения браузера, которые автоматически включают заголовки CORS во все ваши запросы (Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers).Использование этого расширения делает все ваши запросы из браузера CORS включенными (НЕ ХОРОШО ДЛЯ ПРОИЗВОДСТВА, ТОЛЬКО ДЛЯ ТЕСТА / РАЗВИТИЯ).

Обратите внимание, что так называемые «простые запросы», использующие только GET / HEAD / POST иСледующие типы контента: application / x-www-form-urlencoded, multipart / form-data, text / plain не вызывают предварительный запрос CORS, поэтому они разрешены.

Для общего понимания CORS я бысм. документацию Mozilla MDN:

Руководство по Mozilla MDN CORS

Answer 3

Самый простой способ преодолеть проблемы с CORS - это использовать модуль npm для cors. Установите его в свой проект, используя:

npm i cors

Затем включите его в файл app.js следующим образом:

const cors = require('cors');

, а затем используйте его в качестве промежуточного программного обеспечения в вашем app.js следующим образом:

app.use(cors());

И это должно сделать! Надеюсь, это поможет !!