JavaScript - XMLHttpRequest、访问控制允许来源错误

Question

我正在尝试将 XMLHttpRequest 发送到粘贴站点。我正在发送一个包含 api 所需的所有字段的对象，但我不断遇到此问题。我读过这个问题，我想:

httpReq.setRequestHeader('Access-Control-Allow-Headers', '*');

本来可以解决这个问题，但没有。有人知道有关此错误和/或如何修复它的任何信息吗？

这是我的代码:

(function () {

    'use strict';

    var httpReq = new XMLHttpRequest();
    var url = 'http://paste.ee/api';
    var fields = 'key=public&description=test&paste=this is a test paste&format=JSON';
    var fields2 = {key: 'public', description: 'test', paste: 'this is a test paste', format: 'JSON'};

    httpReq.open('POST', url, true);
    console.log('good');

    httpReq.setRequestHeader('Access-Control-Allow-Headers', '*');
    httpReq.setRequestHeader('Content-type', 'application/ecmascript');
    httpReq.setRequestHeader('Access-Control-Allow-Origin', '*');
    console.log('ok');

    httpReq.onreadystatechange = function () {
        console.log('test');
        if (httpReq.readyState === 4 && httpReq.status === 'success') {
            console.log('test');
            alert(httpReq.responseText);
        }
    };

    httpReq.send(fields2);

}());

这是确切的控制台输出:

good
ok
Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:40217' is therefore not allowed access. http://paste.ee/api
XMLHttpRequest cannot load http://paste.ee/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:40217' is therefore not allowed access. index.html:1
test

这是我在常规 Chromium 浏览器上进行本地测试时的控制台输出:

good
ok
XMLHttpRequest cannot load http://paste.ee/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. index.html:1
test

Answer 1

我认为您错过了访问控制的要点。

快速回顾一下 CORS 存在的原因:由于网站中的 JS 代码可以执行 XHR，因此该网站可能会向其他网站发送请求，伪装成您并利用这些网站对您的信任(例如，如果您登录后，恶意站点可能会尝试提取信息或执行您从未想要的操作) - 这称为 CSRF 攻击。为了防止这种情况发生，网络浏览器对您可以发送的 XHR 有非常严格的限制 - 通常仅限于您的域，等等。

现在，有时网站允许其他网站与其联系是很有用的 - 提供 API 或服务的网站(例如您尝试访问的网站)将是主要候选者。 CORS 的开发是为了允许站点 A(例如 paste.ee)说“我信任站点 B，因此您可以将 XHR 从站点发送给我”。这是由站点 A 在其响应中发送“Access-Control-Allow-Origin” header 来指定的。

在您的具体情况下，似乎 paste.ee 并不费心使用 CORS。如果您想通过浏览器脚本使用paste.ee，最好的办法是联系网站所有者并找出原因。或者，您可以尝试使用扩展程序(这些扩展程序应该具有更高的 XHR 权限)。