如何使用 XMLHttpRequest 对象将 Access-Control-Allow-Origin 设置为“*”？答案

【问题标题】：How to set the Access-Control-Allow-Origin to "*" using XMLHttpRequest object?如何使用 XMLHttpRequest 对象将 Access-Control-Allow-Origin 设置为“*”？
【发布时间】：2017-11-16 11:51:56
【问题描述】：

我正在尝试向部署在 Heroku 中的 api 发送请求。我使用了一个 XMLHttpRequest 对象来触发对 api 的请求。我正在尝试一个简单的 GET，没有技巧。但是，我收到此错误：

XMLHttpRequest 无法加载 https://xxx-xxxx-xx.herokuapp.com/api/foods/。请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost' 因此不允许访问。

这对于 Chrome 来说是正常的。但是，我想以 Postman 处理它的方式执行此操作。我应该如何向 api 发出请求，以便它允许一切？

我使用了这个 Chrome 扩展程序并且它工作正常。

https://github.com/vitvad/Access-Control-Allow-Origin/

我能弄清楚的基本上是在设置这个规则：

    rule = {
        "name": "Access-Control-Allow-Origin",
        "value": "*"
    };

但是，当我尝试使用 xhr.setRequestHeader() 方法进行设置时，它不起作用。

<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://xxx-xxxx-xx.herokuapp.com/api/foods/', true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onload = function(){
      console.log(xhr)
    }
    xhr.send(null);
</script>

【问题讨论】：

这只能在扩展级别全局完成或使用充当代理的服务器。解决此问题的方法是让您的服务器应用程序以正确的允许标头响应。
所以，服务器必须发送 Access-Control-Allow-Origin set to *?没有办法用 XMLHttpRequest 或任何其他方式修改它？
不使用基本的 JavaScript，不，这会使整个概念变得毫无意义。正确响应将使此问题消失，或者如果您只是发送 GET，则可以选择 JSONP，请参阅Ways to circumvent the same-origin policy。
请求方法可能不同。我需要为所有 REST 方法实现这一点。但是，假设我可以指定我需要允许标头 Access-Control-Allow-Origin 的域列表是否安全？

标签： javascript heroku http-headers xmlhttprequest cors

【解决方案1】：

需要设置标头的是您在 Heroku 中的 API，而不是调用它的 Web 客户端。

您的浏览器正在跟踪same origin policy，不允许您的页面请求另一个域中的资源。您的服务器可以使用CORS 让浏览器知道可以从另一个域向该特定资源发出请求，但此信息需要来自您的服务器。

扩展程序和 Postman 没有像浏览器那样遵循相同的源策略。为了您的安全，浏览器需要遵守此政策。

您如何设置这些标头实际上取决于您如何在 Heroku 中实现端点。

【讨论】：