CORS 问题。 Github 页面 -> Heroku答案

【问题标题】：CORS issues. Github pages -> HerokuCORS 问题。 Github 页面 -> Heroku
【发布时间】：2020-08-16 06:34:47
【问题描述】：

我遇到了经典的 cors 问题，我无法解决。

CORS 策略已阻止从源“https://username.github.io”访问“xxx/current_user”处的 XMLHttpRequest：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我显然在我的 Node.js 应用程序中安装了 cors 并使用了正确的标头。这是我的 index.js 的样子：

const express = require('express');
const cors = require('cors')
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const passport = require('passport');
const cookieSession = require('cookie-session');

const keys = require('./config/keys');


require('./models/user');
require('./services/passport');

mongoose.connect(keys.mongoUri, { useNewUrlParser: true })

const app = express();

app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use(
    cookieSession({
        maxAge: 30 * 24 + 60 * 60 * 1000, //30 days
        keys: [keys.cookieKey]
    })
);

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", '*');
    res.header("Access-Control-Allow-Credentials", true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
});

app.use(passport.initialize());
app.use(passport.session());

//ROUTES
require('./routes/auth')(app);
require('./routes/game')(app);

const PORT = process.env.PORT || 5000;
app.listen(PORT);

我在我的 react 应用程序中对 API 的基本测试调用如下所示：

export const checkAuth = () => dispatch => {
    axios.get('/current_user').then(res => {
        if (res.data) {

        }
    }).catch(err => {
        console.log({ err })
    })
}

我是否遗漏了一些明显的东西？

current_user 路由代码

 app.get('/current_user', (req, res) => {
        res.send(req.user)
    })

【问题讨论】：

您的服务器在哪里/如何配置？
@WillJenkins 然而 Heroku 正在这样做
为什么要手动向响应中添加标头？您正在使用 cors 中间件库，并且您有固定值：创建一个 corsOptions = {...} 并将其传递给 app.use(cors(corsOptions))，因此 cors 中间件对所有请求“正常工作”。而且您需要使用已清除站点的白名单：除非您想授予对整个互联网的访问权限，否则不要使用 * O_o
@Mike'Pomax'Kamermans 我这样做是因为将来源传递给 corsOptions 并没有解决任何问题，这就是我开始手动添加标题的原因。虽然没有解决任何问题，我希望整个互联网都可以访问它，但现在没有人可以
您将不得不显示更多代码：您正在显示 GET 代码，但出现一个关于预检失败的错误：GET 请求不使用预检，只有 POST 和相关动词可以，所以这几乎肯定不是触发错误的代码。您的网络标签显示什么？

标签： node.js reactjs heroku cors

【解决方案1】：

CORS 可以出现在客户端应用程序以及服务器端请求的 url 上。你应该有

res.header("Access-Control-Allow-Origin", '*');

在您的客户端应用程序以及 github 上。你有它尝试这种方式使用 CURL

curl -i https://api.github.com -H "Origin: http://example.com"

HTTP/1.1 302 找到访问控制允许来源：* Access-Control-Expose-Headers：ETag、Link、X-GitHub-OTP、X-RateLimit-Limit、X-RateLimit-Remaining、X-RateLimit-Reset、X-OAuth-Scopes、X-Accepted-OAuth-Scopes、 X-轮询间隔

这应该可行。这意味着 api.github.com 可以访问 CORS。 但是什么时候你会放 'https://username.github.io' 它会给出错误，因为它是 github 页面并且有 CORS 限制因此，如果您在 GitHub 上启用 Access-Control-Allow-Origin，它也可能会起作用。 res.header("Access-Control-Allow-Origin", '*');

【讨论】：

【解决方案2】：

根据我对 CORS 的记忆

当你使用时：

"Access-Control-Allow-Credentials", true

您需要指定您允许的域，而不是使用通配符

不好：

Access-Control-Allow-Origin: *

好：

Access-Control-Allow-Origin: yoursite.com

在你的节点后端你可以使用这个：

request.header('Referer')

【讨论】：

【解决方案3】：

根据我在 fastify 服务器中配置 CORS 的经验，重启计算机后可以正常工作。您的代码似乎是正确的，尽管使用默认配置设置 CORS 是一个坏主意。在我的情况下，我也正确配置了 CORS。经过大量时间尝试使用不同但正确的配置后，它仅在系统重新启动后才起作用。

我的猜测是系统以某种方式记住了在未设置 CORS 时发出的初始请求。因此，重新启动解决了这个问题，一切都按预期工作。

如果您不想重新启动，也可以在其他机器上尝试。

【讨论】：