Chrome 上的 CORS 错误，但在 IE 中有效

Question

我创建了一个表单，使用户能够从 html 表单提出 JIRA 票证。我已要求管理员将来源（sharepoint 在线站点，表单托管）作为通配符表达式添加到 JIRA 的白名单中，格式为 https://xxxx.sharepoint.com/*。

它现在可以在 IE 中运行，但我仍然在 chroe 中遇到错误：

jquery-3.1.0.min.js:4 XMLHttpRequest 无法加载 https://jira.xxx.xx/rest/api/2/issue/。对预检请求的响应 没有通过访问控制检查：没有“Access-Control-Allow-Origin” 请求的资源上存在标头。起源 'https://xxxx.sharepoint.com' 因此不允许访问。这 响应的 HTTP 状态代码为 403。

在 Edge 中我收到此错误：

HTTP403: FORBIDDEN - 服务器理解请求，但是 拒绝履行。

我注意到的一件事是，当我在 IE 上运行它时，点击提交后。我会看到一个弹出屏幕来登录我的 JIRA 凭据。这不会发生在 Chrome 或 Edge 上。你能告诉我我在这里缺少什么吗？

这是我的 ajax 调用：

return $.ajax({
    url: 'https://jira.xxxx.com/rest/api/2/issue/',
    type: "POST",
    data: parameters,
    contentType: 'application/json',
    dataType: 'JSON',
    async: false,
    processData: false,
    beforeSend: function (xhr) {
        xhr.setRequestHeader('Authorization', 'basic: '+make_base_auth(username, password));
        xhr.setRequestHeader( 'Access-Control-Allow-Origin', 'https://jira.xxxx.com');
        xhr.setRequestHeader( 'X-Atlassian-Token', 'nocheck');
        xhr.setRequestHeader( 'Access-Control-Allow-Credentials', 'true');
        xhr.setRequestHeader( 'Access-Control-Allow-Methods', 'ACL, CANCELUPLOAD, CHECKIN, CHECKOUT, COPY, DELETE, GET, HEAD, LOCK, MKCALENDAR, MKCOL, MOVE, OPTIONS, POST, PROPFIND, PROPPATCH, PUT, REPORT, SEARCH, UNCHECKOUT, UNLOCK, UPDATE, VERSION-CONTROL');
        xhr.setRequestHeader( 'Access-Control-Allow-Headers', 'Overwrite, Destination, Content-Type, Depth, User-Agent, Translate, Range, Content-Range, Timeout, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, Location, Lock-Token, If');
        xhr.setRequestHeader( 'Access-Control-Expose-Headers', 'DAV, content-length, Allow');
    },
    error: function (errmsg) {
        console.log('error ocured:' + errmsg.statusText);
    },
    success: function (text) {
        console.log(text);
    },
});

Answer 1

您添加的所有访问控制标头都是响应标头。在请求中发送它们是没有意义的。 CORS 确实有几个请求标头，但它们是由浏览器发送的。您的请求不应发送。如果 服务器 为跨域请求正确配置，它将在适当的时候在它返回的响应中设置这些标头。

Chrome 告诉您 CORS 预检请求没有 Access-Control-Allow-Origin 标头。预检请求是一个 OPTIONS 请求，用于询问服务器是否允许发出请求。如果服务器发回正确的标头（目前不是），则浏览器知道它可以发出实际的 POST 请求。您没有通过预检请求。

您对跨域视角的请求没有任何问题（除了已经提到的无关标头）。假设其他一切都是正确的，那么问题出在运行 API 的服务器上。控制该服务器的任何人都需要对其进行配置，以正确响应 CORS 预检请求。

我的最佳猜测是 API 被配置为响应实际请求，而不是预检请求。而且，我猜 IE 错误地将请求视为不需要预检请求的“简单请求”。这可以解释为什么它在 IE 中有效，但在 Chrome 中无效。但是，没有更多信息，我只能猜测。