JavaScript - XMLHttpRequest、Access-Control-Allow-Origin 错误

问题描述

我正在尝试将 XMLHttpRequest 发送到粘贴站点.我正在发送一个包含 api 需要的所有字段的对象，但我一直遇到这个问题.我已经阅读了这个问题，我想:

I'm attempting to send a XMLHttpRequest to a paste site. I'm sending an object containing all the fields that the api requires, but I keep getting this issue. I have read over the issue, and I thought:

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

会修复它，但它没有.有没有人有关于这个错误的任何信息和/或我如何解决它?

Would fix it,but it didn't. Does anyone have any information on this error and/or how I can fix it?

这是我的代码:

(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);

}());

这是确切的控制台输出:

And here is the exact console output:

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 浏览器上本地测试时的控制台输出:

Here is the console output when I test it locally on a regular Chromium browser:

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

推荐答案

我认为你错过了访问控制这一点.

I think you've missed the point of access control.

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

A quick recap on why CORS exists: Since JS code from a website can execute XHR, that site could potentially send requests to other sites, masquerading as you and exploiting the trust those sites have in you(e.g. if you have logged in, a malicious site could attempt to extract information or execute actions you never wanted) - this is called a CSRF attack. To prevent that, web browsers have very stringent limitations on what XHR you can send - you are generally limited to just your domain, and so on.

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

Now, sometimes it's useful for a site to allow other sites to contact it - sites that provide APIs or services, like the one you're trying to access, would be prime candidates. CORS was developed to allow site A(e.g. paste.ee) to say "I trust site B, so you can send XHR from it to me". This is specified by site A sending "Access-Control-Allow-Origin" headers in its responses.

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

In your specific case, it seems that paste.ee doesn't bother to use CORS. Your best bet is to contact the site owner and find out why, if you want to use paste.ee with a browser script. Alternatively, you could try using an extension(those should have higher XHR privileges).

这篇关于JavaScript - XMLHttpRequest、Access-Control-Allow-Origin 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！