如何让我的前端应用程序访问我的节点服务器 API

Question

我通过create-react-app创建了一个前端应用程序。
命令">npm run start"可以创建一个webpack-dev-server并为我的
服务用于开发的前端应用程序。问题是来了：

1. 我的前端应用程序必须从我之前创建的节点服务器请求一些 api。
2. 默认情况下，创建-反应-应用程序在端口 3000 上启动 webpack-dev-服务器
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 标头(访问控制允许来源、访问控制允许方法、访问控制允许标头(。使用此扩展程序可以启用来自浏览器 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

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

const cors = require('cors');

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

app.use(cors());

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