使用XMLHttpRequest继续获取No'Access-Control-Allow-Origin'错误 [英] Keep getting No 'Access-Control-Allow-Origin' error with XMLHttpRequest

问题描述

我会通过使用jQuery $。ajax 函数解决这个问题，但在这种情况下jQuery不是选项。相反，我要用CORS请求。我觉得有网页服务器响应请求有问题，我很难弄清楚问题是什么。

这里是我的代码创建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（'数据无法加载:('）; 
 console.log（JSON.stringify（XMLHttpRequest） ）; 
}; 
 httpRequest.onload = function（）{
 console.log（'SUCCESS！'）; 
} 
  
 
 
 
这里是console.log错误：
 
 
 XMLHttpRequest load 
  http://test.testhost.com/testpage 。请求标题字段
 Access-Control-Allow-Origin不允许通过
 Access-Control-Allow-Headers。
 
 
标题信息：
 >远程地址：**。**。***。**：80请求
> URL：http：//test.testdomain.com/testpage请求
>请求方法：选项
>状态代码：200 OK 
  
 请求标题：
  OPTIONS / content-network HTTP / 1.1 
 Host：test.testhost.com 
连接：keep-alive 
缓存控制：no-cache 
 Pragma：no-cache 
访问控制请求方法：POST 
原产地：http://test.testdomain.com 
 User-Agent：Mozilla / 5.0（Macintosh; Intel Mac OS X 10_9_4）AppleWebKit / 537.36（KHTML，像Gecko）Chrome / 36.0.1985.125 Safari / 537.36 
访问控制请求头：访问控制允许源，内容类型
接受：* / * 
 Referer：http://test.testdomain.com/ 
 Accept-Encoding：gzip，deflate，sdch 
 Accept-Language：en-US，en; q = 0.8 
  
 响应标题：
  HTTP / 1.1 200 OK 
日期：Thu，2014年8月14日20:17:25 GMT 
服务器：Apache 
最后修改：Thu，14 Aug 2014 20:17:25 +0000 
缓存控制：无缓存，必须重新验证，后检查= 0，预检查= 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 标头。这正是<$ c ... c> Access-Control-Allow-Headers  不允许的错误信息试图告诉你。 p> 
 
 
请求没有任何理由拥有这个头：它什么都不做，因为 Access-Control-Allow-Origin  
 ：移除 setRequestHeader  在您的请求中添加 Access-Control-Allow-Origin 标头。
 
I would have solved this issue by using jQuery $.ajax function but in this case jQuery is not option.  Instead I am going with CORS request.  I feel there is something wrong with the webserver that is responding to the request and I am having a hard time figuring out what the issue is.

Here is my code for creating the CORS request
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!');
}
Here is the console.log error:

  
XMLHttpRequest cannot load
  http://test.testhost.com/testpage. Request header field
  Access-Control-Allow-Origin is not allowed by
  Access-Control-Allow-Headers.
Here are the header information:
> Remote Address:**.**.***.**:80 Request
> URL:http://test.testdomain.com/testpage Request
> Request Method:OPTIONS
> Status Code:200 OK
Request Headers:
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
Response Headers:
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

解决方案
Your server's response allows the request to include three specific non-simple headers:
Access-Control-Allow-Headers:origin, x-requested-with, content-type
but your request has a header not allowed by the server's response:
Access-Control-Request-Headers:access-control-allow-origin, content-type
All non-simple headers sent in a CORS request must be explicitly allowed by the Access-Control-Allow-Headers response header. The unnecessary Access-Control-Allow-Origin header sent in your request is not allowed by the server's CORS response. This is exactly what the "...not allowed by Access-Control-Allow-Headers" error message was trying to tell you.

There is no reason for the request to have this header: it does nothing, because Access-Control-Allow-Origin is a response header, not a request header.

Solution: Remove the setRequestHeader call that adds a Access-Control-Allow-Origin header to your request.

                        
这篇关于使用XMLHttpRequest继续获取No'Access-Control-Allow-Origin'错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！