如何使前端应用程序访问节点服务器api

Question

我已经通过creat-react-app创建了一个前端应用程序 。
命令“ npm run start ”可以创建一个webpack-dev-server并为我的
开发的前端应用程序。 问题来了：

1. 我的前端应用程序必须从我之前创建的节点服务器中请求一些api 。
2. 默认情况下，create-react-app在端口3000上启动webpack-dev-server
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

使用NodeJS后端处理CORS的一种简单方法是使用ExpressJS中间件和“ cors”扩展，如ExpressJS文档中所述：

ExpressJS CORS指南

为了进行测试，有各种浏览器扩展会自动在所有请求中实现CORS标头（Access-Control-Allow-Origin，Access-Control-Allow-Methods和Access-Control-Allow-Header）。 使用此扩展程序将使您从浏览器发出的所有请求都变为启用CORS（不适用于生产，仅用于测试/开发）。

请注意，所谓的“简单请求”（仅使用GET / HEAD / POST和以下内容类型的请求）：application / x-www-form-urlencoded，multipart / form-data，text / plain不会触发CORS预检请求所以他们被允许。

对于CORS的一般理解，我可以参考Mozilla MDN文档：

Mozilla MDN CORS指南

Answer 3

解决CORS问题的最简单方法是对cors使用npm模块。 使用以下命令将其安装在您的项目中：

npm i cors

然后将其包含在您的app.js文件中，如下所示：

const cors = require('cors');

然后将其用作app.js中的中间件，如下所示：

app.use(cors());

这应该做！ 希望这可以帮助！！