restify 服务器中的 CORS 给我带来了麻烦答案

【问题标题】：CORS in a restify server is giving me troublerestify 服务器中的 CORS 给我带来了麻烦
【发布时间】：2020-02-02 05:32:47
【问题描述】：

我有一个 RESTIFY api 在树莓派上运行。它的 IP 是静态的 192.168.1.12。我还想从 create-react-app 运行一个 Web 服务器，我可以访问它从 api 获取信息。

RESTify - 192.168.1.12:8080
create-react-app: 192.168.1.12:3000

create-react-app:

axios.get(`http://localhost:8080/ping`).then(
    (response) => {
        console.log(`response received!`);
    }
).catch(
    (error) => {
        console.error(`error received from axios`);
    }
);

RESTify（设置服务器时）：

const corsMiddleware = require('restify-cors-middleware');
const cors = corsMiddleware(
    {
        origins: [
            '*'
        ]
    }
);
server.pre(cors.preflight);
server.use(cors.actual);
server.get(`/ping`, (req, res) => res.send(200));

但我仍然无法让create-react-app 连接到服务器。我在这里做错了什么？

【问题讨论】：

标签： node.js cors restify

【解决方案1】：

如果你使用的是 Expressjs 那么你可以使用。

npm install cors
var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

或者你可以使用中间件

//CORS middleware
var corsMiddleware = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'localhost'); //replace localhost with actual host
    res.header('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, PATCH, POST, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, Authorization');

    next();
}

app.use(corsMiddleware);

【讨论】：

我将使用pm2 来运行我的create-react-app，没有快递。我的 restify 服务器已经启动和开发，所以我无法切换到 express。我已经尝试了您的第二个选项，但没有奏效。
res.header('Access-Control-Allow-Origin', 'localhost'); //用实际主机替换本地主机 res.header('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, PATCH, POST, DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, Authorization');
你的后端是什么？
我试过你是第二个选项（设置标题），我得到了同样的结果。
使用在启动时使用 systemd 运行的 yarn 运行 restify 服务器。还想运行一个前端（因此是 create-react-app），它也可以在启动时使用 systemd 和 yarn 运行。所有内部

【解决方案2】：

 res.header('Access-Control-Allow-Origin', 'localhost'); //replace localhost with actual host
    res.header('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, PATCH, POST, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, Authorization');

【讨论】：

【解决方案3】：

restify on port 8080:

const corsMiddleware = require('restify-cors-middleware');

const cors = corsMiddleware({origins: ['*']});
server.pre(cors.preflight);
server.use(cors.actual);
server.get('/ping', (req, res) => { console.log('pinged'); res.send(200, 'hello') });

CRA on port 3000:

文件package.json：

"proxy": "http://localhost:8080"

文件App.js：

fetch('/ping', { accept: 'application/json' }).then(data => data.json()).then(json => console.log(json));

来源：Here

【讨论】：