CORS 和 Web 扩展

我设置了一个服务器http://本地主机:8080 http://localhost:8080 where http://example.com http://example.com可以执行 POST 请求：

'use strict';

const express = require('express');

const app = express();
const port = 8080;

// allowing CORS for example.com
app.use('/', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://example.com');
    if (req.method === 'OPTIONS') {
        res.header('Access-Control-Allow-Methods', 'OPTIONS, POST');
        res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length');
        res.status(200).send();
    } else {
        next();
    }
});

// handling POST requests
app.use('/', function (req, res) {
    console.log('a client did a POST request');
    res.status(200);
});

app.listen(port, () => console.log ('server started on port ' + port));

它工作正常：我无法执行 POST 请求http://本地主机:8080 http://localhost:8080 from http://本地主机:8081 http://localhost:8081因为同源政策。

然后我为 Firefox 编写了一个 Web 扩展，它将尝试向http://本地主机:8080 http://localhost:8080来自任何域。

这是它的清单：

{
    "manifest_version" : 2,
    "name" : "aBasicExtension",
    "version" : "0.0.0",
    "content_scripts" : [
        {
            "matches" : ["<all_urls>"],
            "js" : ["content-script.js"]
        }
    ],
    "permissions" : ["*://*.localhost/*"]
}

and its content-script.js code :

(() => {

    'use strict';

    const xhr = new XMLHttpRequest();

    xhr.open('POST', 'http://localhost:8080');
    xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');

    xhr.addEventListener('readystatechange', () => {
        if (xhr.readyState === XMLHttpRequest.DONE){
            if (xhr.status === 200) console.log('OK');
            else console.error('an error has occured : ' + xhr.status);
        }
    });

    xhr.send(JSON.stringify({dataName: 'some data here'}));

})();

我不明白的是它有效。扩展程序执行请求http://本地主机:8080 http://localhost:8080Firefox 并没有阻止它，因为清单允许它，但是服务器（http://本地主机:8080 http://locahost:8080) 没有得到他的许可.

简短版本：CORS 是一种用于控制浏览器行为的协议，而不是服务器的行为。以及您对插件的使用permissions设置绕过了同源策略和 CORS 的需要。

如果您查看 CORS 代码，您会发现它没有执行任何拒绝请求的操作；它只是在响应上设置标头。这些标头将指示浏览器客户端是否可以读取响应，但无论如何都会发送响应。

这一事实可能会被某些强制 CORS 预检的请求所掩盖。在这种情况下，浏览器首先发送一个特殊的OPTIONS请求，以及附加到该响应的标头可以阻止浏览器发送真正的请求。这是一种向后兼容机制，并不适用于所有请求。 （看这个答案 https://stackoverflow.com/questions/15381105/cors-what-is-the-motivation-behind-introducing-preflight-requests/41687744#41687744以获得更长的解释。）

这就是你的例子中发生的情况。你的POST属于需要在 CORS 下进行飞行前检查的类型。因此，在常规版本中，浏览器会发送预检检查，查看响应标头，并且不会发送真正的请求。但如果它是一种不同类型的 POST，它将直接发送请求，并且服务器将执行它。

在插件版本中，您特别允许在您的permissions环境。这绕过同源策略 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions:

额外的权限包括：XMLHttpRequest 和获取对这些源的访问权限，而无需跨源限制（即使是从内容脚本发出的请求）。

因此在这种情况下不需要预检，直接发送请求。

如果您想拒绝服务器上来自某些域的请求（或更普遍地防止 CSRF），则可以进行其他设置。它们是什么取决于您的网络框架。