問(wèn)題描述

我會(huì)通過(guò)使用 jQuery $.ajax 函數(shù)來(lái)解決這個(gè)問(wèn)題，但在這種情況下，jQuery 不是選項(xiàng).相反，我將使用 CORS 請(qǐng)求.我覺(jué)得響應(yīng)請(qǐng)求的網(wǎng)絡(luò)服務(wù)器有問(wèn)題，我很難找出問(wèn)題所在.

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.

這是我創(chuàng)建 CORS 請(qǐng)求的代碼

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!');
}

這是 console.log 錯(cuò)誤:

Here is the console.log error:

XMLHttpRequest 無(wú)法加載http://test.testhost.com/testpage.請(qǐng)求頭域Access-Control-Allow-Origin 不允許訪問(wèn)控制允許標(biāo)頭.

XMLHttpRequest cannot load http://test.testhost.com/testpage. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers.

這是標(biāo)題信息:

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

請(qǐng)求標(biāo)頭:

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

響應(yīng)標(biāo)頭:

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

推薦答案

您的服務(wù)器的響應(yīng)允許請(qǐng)求包含三個(gè)特定的 非簡(jiǎn)單標(biāo)題:

Your server's response allows the request to include three specific non-simple headers:

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

但是您的請(qǐng)求包含服務(wù)器響應(yīng)不允許的標(biāo)頭:

but your request has a header not allowed by the server's response:

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

在 CORS 請(qǐng)求中發(fā)送的所有非簡(jiǎn)單標(biāo)頭必須由 Access-Control-Allow-Headers 響應(yīng)標(biāo)頭明確允許.服務(wù)器的 CORS 響應(yīng)不允許在您的請(qǐng)求中發(fā)送不必要的 Access-Control-Allow-Origin 標(biāo)頭.這正是...Access-Control-Allow-Headers 不允許"錯(cuò)誤消息試圖告訴您的內(nèi)容.

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.

請(qǐng)求沒(méi)有理由有這個(gè)標(biāo)頭:它什么都不做，因?yàn)?Access-Control-Allow-Origin 是一個(gè) response 標(biāo)頭，而不是請(qǐng)求標(biāo)頭.

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.

解決方案:刪除向您的請(qǐng)求添加 Access-Control-Allow-Origin 標(biāo)頭的 setRequestHeader 調(diào)用.

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

這篇關(guān)于使用 XMLHttpRequest 不斷收到 No 'Access-Control-Allow-Origin' 錯(cuò)誤的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！