Question

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

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

我该如何从这些问题开始我的发展故事！

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

仅使用以下标题

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标头（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

Answer 3

The easiest way to overcome CORS issues is to use npm module for cors. Install it in your project using:

npm i cors

Then include it in your app.js file like this:

const cors = require('cors');

and then use it as a middleware in your app.js like this:

app.use(cors());

And this should do! Hope this helps!!

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

3 个答案: