使用 XMLHttpRequest 发布到页面答案

【问题标题】：Posting to a page using XMLHttpRequest使用 XMLHttpRequest 发布到页面
【发布时间】：2015-05-09 01:45:45
【问题描述】：

为了解决这个问题，我编写了以下脚本：

window.onload = function() {
    var request = new XMLHttpRequest();
    var url = "http://localhost:3000/say_hello";
    var params = "username=FooMan";

    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            console.log(request.responseText);
        }
    }
    request.open("POST", url, true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.withCredentials = true;
    request.send(params);
}

但是每次我尝试执行该脚本时，我都会得到

XMLHttpRequest cannot load http://localhost:3000/say_hello. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

我尝试过使用

 request.setRequestHeader("Access-Control-Allow-Origin", "*");
 request.setRequestHeader("Access-Control-Allow-Origin", "hello.html");

浏览器是Chrome。我做错了什么或错过了什么？

【问题讨论】：

Access-Control-Allow-Origin 标头需要设置在服务器端，而不是客户端。您的后端是用什么语言编写的？
@AlliterativeAlice Ruby 在 Rails 中
对于跨源问题的本地解决方案，您可以安装Allow-Control-Allow-Origin plugin
@sfletche 任何程序化解决方案？
没有简单的编程解决方案...

标签： javascript ruby-on-rails json http post

【解决方案1】：

Access-Control-Allow-Origin header 需要在服务器端设置并在响应中发送，而不是在客户端设置在请求中。在 Rails 中，这可以通过在控制器中放置以下代码来实现：

headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
headers['Access-Control-Request-Method'] = '*'
headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'

欲了解更多信息，请参阅Allow anything through CORS Policy

【讨论】：

【解决方案2】：

您遇到了同源安全限制。默认情况下，不允许 Javascript 向与运行脚本的网页具有不同来源（域、端口和协议）的服务器发送 Ajax 调用。

在您的特定情况下，这部分错误消息：

Origin 'null' is therefore not allowed access.

表示您可能正在运行一个本地网页（硬盘上的一个网页）并且该脚本被阻止通过 Ajax 访问外部服务器。

如果脚本所在的网页在实际的 Web 服务器上运行（而不是从本地硬盘驱动器），则默认情况下，只能对同一 Web 服务器进行 Ajax 调用。如果您想对其他服务器进行 Ajax 调用，那么您需要一个协作服务器才能与其他服务器进行通信。

要进行简单的 Ajax 调用，服务器必须指定 Access-Control-Allow-Origin 标头，告诉主机浏览器可以接受来自服务器本身以外的某些域的 Ajax 调用。这被称为 CORS（跨源资源共享）。您可以阅读更多关于如何使用 CORS here on MDN 的信息。您不能从客户端设置这些标头 - 它们必须从服务器设置。服务器必须授予浏览器跨站点访问权限，而不是相反。

除了 CORS，JSONP 也是跨站点访问的变通方法。

CORS 和 JSONP 都需要主机服务器的配合才能允许跨域访问。而且，即使使用 CORS 或 JSONP，如果网页是从本地文件系统（而不是在实际的 Web 服务器上）运行的，某些浏览器（如 Chrome）仍然会阻止访问。在为开发目的运行浏览器之前，可以在 Chrome 中使用命令行选项暂时绕过此限制，但这显然不是通用解决方案。

【讨论】：

@philippe - 这回答了你的问题吗？