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

Question

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

我的前端应用程序必须从我之前创建的 节点服务器 请求一些 api。
默认情况下，create-react-app 在 3000 端口
我的节点服务器是在 端口 3001
直接访问3001端口可能会出现跨域问题

如何从这些问题中优雅地开始我的成长故事！

Answer 1

有两种方法可以解决节点服务器中的cross-origin个问题，

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

只需使用以下 headers

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 guide

出于测试目的，有各种浏览器扩展在您的所有请求中自动实施 CORS headers（Access-Control-Allow-Origin、Access-Control-Allow-Methods , Access-Control-Allow-Headers). 使用此扩展程序会启用来自浏览器的所有请求 CORS（不适用于生产，仅适用于 TEST/DEV）。

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

为了全面了解 CORS，我会参考 Mozilla MDN 文档：

Mozilla MDN CORS guide

Answer 3

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

npm i cors

然后像这样将其包含在您的 app.js 文件中：

const cors = require('cors');

然后像这样在 app.js 中将其用作中间件：

app.use(cors());

而且应该这样做！希望这对您有所帮助！！

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

How can I make my front end app access my node server apis

cross-domain

node.js

reactjs

create-react-app