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

【问题标题】：How can I make my front end app access my node server apis如何让我的前端应用程序访问我的节点服务器 API
【发布时间】：2019-10-13 20:24:56
【问题描述】：

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

我的前端应用程序必须从我之前创建的 节点服务器 请求一些 api。
默认情况下 create-react-app 在 port 3000 上启动一个 webpack-dev-server
我的节点服务器在 端口 3001 上启动
直接访问3001端口可能会导致跨域问题

我怎样才能从这些问题优雅地开始我的发展故事！

【问题讨论】：

标签： node.js reactjs cross-domain create-react-app

【解决方案1】：

克服 CORS 问题的最简单方法是使用 npm 模块进行 cors。使用以下命令将其安装到您的项目中：

npm i cors

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

const cors = require('cors');

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

app.use(cors());

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

【讨论】：

【解决方案2】：

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

ExpressJS CORS guide

出于测试目的，有各种浏览器扩展可以自动在您的所有请求中实现 CORS 标头（Access-Control-Allow-Origin、Access-Control-Allow-Methods ，访问控制允许标头）。使用此扩展程序会启用来自浏览器的所有请求 CORS（不适用于生产，仅适用于测试/开发）。

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

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

Mozilla MDN CORS guide

【讨论】：

【解决方案3】：

解决节点服务器跨域问题的方法有两种，

使用 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");
});

只需使用以下标题

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();
});

【讨论】：