解决 Tampermonkey 扩展中的 CORS“跨源请求被阻止”

Question

我有一个 Tampermonkey 插件使用 Websockets 联系我的本地开发服务器。这不起作用并抛出以下错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://127.0.0.1:3000/socket.io/?EIO=3&transport=polling&t=N9Bvvb3. (Reason: CORS request did not succeed).

所以我尝试了通过CORS搜索找到的前三个插件：

• https://addons.mozilla.org/de/firefox/addon/cors-unblock/?src=search
• https://addons.mozilla.org/de/firefox/addon/cross-domain-cors/?src=search
• https://addons.mozilla.org/de/firefox/addon/cors-everywhere/?src=search

它们似乎都不起作用。我该如何解决这个问题？

我了解 CORS 背后的安全思想。由于我的软件面向开发人员并且仅在本地使用，因此我不需要它。因此，我正在寻找一个easy解决方案，以允许我的tampermonkey脚本在访问像https://example.com.

这样的网页时连接到本地主机

我还在服务器端尝试了不同的方法来使 CORS 正常工作，例如 this 或 this，但仍然收到错误。

服务器

let app = express();
app.use(express.static(path.resolve(`${__dirname}/../dist`)));
const certDir = "certs";
let httpOpts = {
  key: fs.readFileSync(`${certDir}/localhost.key`),
  cert: fs.readFileSync(`${certDir}/localhost.crt`),
  requestCert: false,
  rejectUnauthorized: false
};
var http = require("https").createServer(httpOpts, app);
var io = require("socket.io")(http);

Tampermonkey 客户端脚本

const localDevUrl = "https://127.0.0.1:3000";
this.socket = io(localDevUrl, { secure: true });

Answer 1

既然你控制了服务器，那么正确的修复方法就是让服务器允许浏览器显示页面。但

localhost

可能是一个特例。

无论如何，您可以使用 https://www.tampermonkey.net/documentation.php#api:GM_xmlhttpRequest 来发出请求，CORS 规则将被跳过。