一直得到No 'Access-Control-Allow-Origin'XMLHttpRequest错误

Keep getting No 'Access-Control-Allow-Origin' error with XMLHttpRequest

本文关键字：XMLHttpRequest 错误 Access-Control-Allow-Origin 一直 No      更新时间：2023-09-26

我本可以通过使用jQuery $.ajax函数来解决这个问题，但在这种情况下，jQuery不是选项。相反，我将采用CORS请求。我觉得响应请求的web服务器有问题，我很难弄清楚问题是什么。

下面是创建CORS请求的代码

var httpRequest = new XMLHttpRequest();
httpRequest.open('POST', url, true);
httpRequest.setRequestHeader( 'Access-Control-Allow-Origin', '*');
httpRequest.setRequestHeader( 'Content-Type', 'application/json' );
httpRequest.onerror = function(XMLHttpRequest, textStatus, errorThrown) {
  console.log( 'The data failed to load :(' );
  console.log(JSON.stringify(XMLHttpRequest));
};
httpRequest.onload = function() {
  console.log('SUCCESS!');
}

console.log错误:

XMLHttpRequest无法加载http://test.testhost.com/testpage。请求报头字段Access-Control-Allow-Origin不被允许Access-Control-Allow-Headers .

标题信息如下:

> Remote Address:**.**.***.**:80 Request
> URL:http://test.testdomain.com/testpage Request
> Request Method:OPTIONS
> Status Code:200 OK

请求头:

OPTIONS /content-network HTTP/1.1
Host: test.testhost.com
Connection: keep-alive
Cache-Control: no-cache
Pragma: no-cache
Access-Control-Request-Method: POST
Origin: http://test.testdomain.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Access-Control-Request-Headers: access-control-allow-origin, content-type
Accept: */*
Referer: http://test.testdomain.com/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

响应标头:

HTTP/1.1 200 OK
Date: Thu, 14 Aug 2014 20:17:25 GMT
Server: Apache
Last-Modified: Thu, 14 Aug 2014 20:17:25 +0000
Cache-Control: no-cache, must-revalidate, post-check=0, pre-check=0
ETag: "1408047445"
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Vary: Accept-Encoding
Content-Encoding: gzip
Access-Control-Allow-Headers: origin, x-requested-with, content-type
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
Content-Length: 6117
Connection: close
Content-Type: text/html; charset=utf-8

您的服务器响应允许请求包含三个特定的非简单标头:

Access-Control-Allow-Headers:origin, x-requested-with, content-type

但是你的请求有一个服务器不允许的报头:

Access-Control-Request-Headers:access-control-allow-origin, content-type

在CORS请求中发送的所有非简单标头必须被Access-Control-Allow-Headers响应标头明确允许。服务器的CORS响应不允许在请求中发送不必要的Access-Control-Allow-Origin头。这正是"…"" not allowed by Access-Control-Allow-Headers "

请求没有理由有这个报头:它什么也不做，因为Access-Control-Allow-Origin是一个响应报头，而不是请求报头。

解决方案:删除setRequestHeader调用，为您的请求添加Access-Control-Allow-Origin头。

删除:

httpRequest.setRequestHeader( 'Access-Control-Allow-Origin', '*');

…并添加:

httpRequest.withCredentials = false;

除了您的CORS问题外，您试图访问的服务器已启用HTTP基本身份验证。通过在传递给XHR的URL中指定凭据，可以在跨域请求中包含凭据:

url = 'http://username:password@test.testhost.com/testpage'

在后端服务器启用CORS或添加chrome扩展https://chrome.google.com/webstore/search/CORS?utm_source=chrome-ntp-icon and make ON

我们在OAuth2集成中经常看到这种情况。我们向客户提供API服务，客户会天真地尝试将他们的私钥放入AJAX调用中。这真的是很差的安全性。而编码良好的API网关、前端的后端和其他此类代理都不允许这样做。你应该得到这个错误。

我将引用@aspillers评论并更改一个单词:"Access-Control-Allow-Origin是在服务器响应中发送的标头，它指示如果允许客户端查看结果的内容"。

问题:问题是开发人员试图将他们的私钥包含在客户端(浏览器)JavaScript请求中。它们将得到一个错误，这是因为它们暴露了客户机的秘密。

解决方案:让JavaScript web应用程序与安全保存客户端秘密的后端服务对话。该后端服务可以向OAuth2提供商验证web应用程序，并获得访问令牌。然后，web应用程序可以进行AJAX调用。

相关文章：