快速节点服务器的 Firefox CORS 失败答案

【问题标题】：Firefox CORS failure with express node server快速节点服务器的 Firefox CORS 失败
【发布时间】：2020-06-14 10:12:54
【问题描述】：

我将 Express.js 与 CORS 中间件一起使用。我在 Firefox v73.0.1（64 位）上遇到了非常奇怪的行为

清理 firefox 配置文件...所以没有缓存。

我尝试直接向http://localhost/search?q=AMZN 请求，我得到了预期的结果。
我打开了在 localhost:3000 上运行的 web 应用程序。所有这些请求都没有使用 TLS/SSL。
我收到“跨源请求被阻止：同源策略不允许读取位于http://localhost/search?q=AMZN 的远程资源。（原因：CORS 请求未成功）。”当它尝试访问 API 服务器后端时。
我刷新了我直接访问本地主机的另一个选项卡（之前成功的相同请求），我得到一个“连接重置”。

Chrome 不这样做...

我一直在研究wireshark，而Firefox只是发送一个GET请求（其中几个？为什么？？我只做一个），发送标头等，然后是连接重置。

听起来节点做错了什么？或者我不知道。

const express = require('express');
const fetch = require('node-fetch');
const util = require('util');
const app = express();
const port = 80;

var cors = require('cors')

var copts = {
  origin: function (origin, callback) {
      console.log('yeah');
    // allow all
    callback(null, true);
  }
}

const SEARCH_URL = 'https://api.stocktwits.com/api/2/streams/symbol/%s.json';

app.get('/search', cors(copts), (req, res) => {

“是的”部分根本不会被击中。

非常简单的客户端代码。

return fetch(BACKEND_URL + uri).then(response => {

尝试删除 CORS 中间件并添加这些标头，基于检查 github 在 chrome 中的跨浏览器请求响应

    res.header('Access-Control-Allow-Methods', 'GET');
    res.header('Access-Control-Max-Age', '3600');
    res.header('Vary', 'Origin, Access-Control-Request-Headers, Access-Control-Request-Method, Accept-Encoding');
    res.header('Access-Control-Allow-Origin', '*');

我并没有真正捕获选项处理程序，所以也许这无关紧要。我在 GET 响应中找到了这些标头。

【问题讨论】：

您在哪里添加了对res.header 的调用？您可能在 OPTIONS 请求和从浏览器发送的 GET 请求中都需要它们。关于 OPTIONS 请求，结帐developer.mozilla.org/en-US/docs/Web/HTTP/CORS - 滚动到“功能概览”
#1 您的网站 (localhost:3000) 是否使用 ajax 您的后端？ , #2 尝试在后端使用另一个端口而不是 80。 #3 或者尝试使用不带插件的firefox support.mozilla.org/en-US/kb/…

标签： node.js express firefox cors

【解决方案1】：

节点服务器可能会因无效请求而崩溃，因此您会收到重置错误。

使用 cors 包：

对于某些旧版浏览器，您需要在cors 选项中添加optionsSuccessStatus 属性。和OPTIONS handler 启用飞行前请求。

const express = require('express');
const fetch = require('node-fetch');
const util = require('util');
const app = express();
const port = 80;
var cors = require('cors')
var copts = {
    origin: function (origin, callback) {
        console.log('yeah');
        callback(null, true);
    },
    optionsSuccessStatus: 200
}
app.options("*", cors(copts));
const SEARCH_URL = 'https://api.stocktwits.com/api/2/streams/symbol/%s.json';
app.get('/search', cors(copts), (req, res) => { });

带有标题：您在响应headers 中缺少Access-Control-Allow-Headers，您需要在响应标头中添加Access-Control-Allow-Headers 标头以允许Access-Control-Allow-Origin 标头。

试试这个。

const express = require('express');
const fetch = require('node-fetch');
const util = require('util');
const app = express();
const port = 80;
var cors = require('cors')
var copts = {
    origin: function (origin, callback) {
        console.log('yeah');
        // allow all
        callback(null, true);
    }
}
const SEARCH_URL = 'https://api.stocktwits.com/api/2/streams/symbol/%s.json';
app.get('/search', (req, res) => { 
    res.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Origin');
    res.header('Access-Control-Allow-Origin', '*');
    res.status(200).send("Ok")
});

【讨论】：

【解决方案2】：

在我的例子中，FireFox 将请求标头从 ajax 删除到 http url，但可以正常使用 https

【讨论】：

【解决方案3】：

您是否使用以下内容更新了您的前端 package.json 文件？

"proxy": "http://localhost:[your port here]/",

【讨论】：

【解决方案4】：

尝试像这样将 CORS 分配给 express 服务器：

const cors = require('cors');
app.use(cors());

【讨论】：