Access-Control-Allow-Origin 错误解决方法 - 无法访问服务器答案

【问题标题】：Access-Control-Allow-Origin Error Workaround - No Access to ServerAccess-Control-Allow-Origin 错误解决方法 - 无法访问服务器
【发布时间】：2017-11-15 18:20:29
【问题描述】：

我在使用 AJAX 调用 UPS 上的 API 时遇到以下错误

XMLHttpRequest 无法加载 https://wwwcie.ups.com/rest/Ship。回应预检请求未通过访问控制检查：否 'Access-Control-Allow- Origin' 标头存在于请求的资源上。起源 'http://localhost:63786' 因此不允许访问。

AJAX 调用：

$.ajax({
     url: "https://wwwcie.ups.com/rest/Ship",
     type: "POST",
     dataType: 'json',
     crossDomain: true,
     contentType: 'application/json',
     data: JSON.stringify(message),
     success: function (result) {
              //code to execute on success
     }
     error: function (result) {
              //code to execute on error
     }
})

我无法控制 API 服务器，因此无法修改发回的标头。我已经尝试过 JSONP，更改了我发送的标头，以及许多其他解决方案都无济于事。我已经读过制作服务器端代理可能是一个合适的选择，但我不确定我将如何去做。任何关于可能解决方案的建议/代码示例将不胜感激。提前致谢。

【问题讨论】：

您需要一个服务器端代理。编写发送该请求并转发响应的服务器代码。
代理是您唯一的选择。而且，由于您没有指定您使用的服务器，因此不可能给您一个具体的答案。
how to bypass Access-Control-Allow-Origin?的可能重复
“您没有指定您使用的服务器”是什么意思。我正在尝试对 UPS API 运输服务器进行 POST。
@AnthonyGargano 不是你的服务器。您将要构建的代理需要在您的服务器上构建。

标签： javascript jquery ajax xmlhttprequest cors

【解决方案1】：

如何阻止恶意网站向您银行的网络应用发送请求并转移您的所有资金？为了防止这些类型的恶作剧，如果您使用的是 Web 浏览器，服务器必须明确说明允许哪些远程源访问某个资源（如果有）。

如果您需要密钥来访问它，则可能未启用 CORS。您始终可以通过查看响应标头来仔细检查。看到这个：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

正如其他人已经提到的那样，您可以通过从您自己的服务器发出请求（其中标头不将其识别为浏览器并受 CORS 限制）来解决此问题，并将其代理到您的客户端应用程序.

假设您使用的是 Node/Express，这样的事情应该可以工作：

const express = require('express');
const app = express();

const myHeaders = new Headers();

const myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

app.get('/ups/stuff/stuff', (req, res) => {
  fetch('/ups/api/stuff', myInit)
    .then(response => response.json())
    .then(json => res.json(json);
});

app.listen(3000);

原生 fetch API 很简洁，因为您可以在客户端和服务器上使用它，并且它支持像 jQuery 这样的 Promise。

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

【讨论】：