如何使用 XMLHttpRequest 设置 Access-Control-Allow-Origin 标头

Posted 2023-03-04

【中文标题】如何使用 XMLHttpRequest 设置 Access-Control-Allow-Origin 标头

【英文标题】：How to set the Access-Control-Allow-Origin header with XMLHttpRequest

【发布时间】：2014-06-09 22:58:44

【问题描述】：

这是根据提供的示例验证 geoJSON 的代码：

 function processSuccess(data)
            if(data.status==="ok")  console.log("You just posted some valid geoJSON");
            else if(data.status==="error") console.log("There was a problem with your geoJSON "+data.message);
        
        function processError(data)
            console.log("The AJAX request could not be successfully made");
        
        $.ajax(
            url: 'http://geojsonlint.com/validate',
            type: 'POST',
            data: geo,
            dataType: 'json',
            success: processSuccess,
            error: processError
        );   

我正在尝试使用以下代码验证 geoJSON：

  var getXHR=function()

    tryreturn new XMLHttpRequest();   catch(e)
    tryreturn new ActiveXObject("Msxml2.XMLHTTP.6.0");    catch(e)
    tryreturn new ActiveXObject("Msxml2.XMLHTTP.3.0");    catch(e)
    tryreturn new ActiveXObject("Microsoft.XMLHttp");     catch(e)
    console.err("Could not find XMLHttpRequest");
;
var makeRequest=function(uri,data)

    //make the actual XMLHttpRequest
    var xhr=getXHR();
    if('withCredentials' in xhr)    console.log("Using XMLHttpRequest2 to make AJAX requests");
    xhr.open("POST",uri,true);
    xhr.onreadystatechange=function()
        if(xhr.readyState===4)
        
            if(xhr.status===200 || xhr.status===304)
            
                var response=JSON.parse(xhr.responseText);
                if(response.status==="ok")  console.log("You just posted some valid geoJSON");
                else if(response.status==="error")  console.log("There was a problem with your geoJSON "+response.message); 
                else    console.log("Response has been recieved using "+response.status);
            
        
        else    console.log("Response recieved with status "+xhr.status);
    ;
    xhr.setRequestHeader("Content-Type","application/json");
    xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");
    //supported in new browsers...do JSONP based stuff in older browsers...figure out how
    xhr.setRequestHeader("Access-Control-Allow-Origin","http://geojsonlint.com/");
    xhr.setRequestHeader("Accept","application/json");
    xhr.send(JSON.stringify(data));
;

在这里，我提出了实际的要求：

 makeRequest('http://geojsonlint.com/validate',geo);

错误：

我在 Chrome 控制台中收到此错误：

 Using XMLHttpRequest2 to make AJAX requests gmaps_geoJSON.js:14
 Failed to recieve response gmaps_controls.js:25
 XMLHttpRequest cannot load http://geojsonlint.com/validate. Request header field   
 Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers.   

标题

这是与请求相关的数据：

Request URL:http://geojsonlint.com/validate
Request Method:OPTIONS
Status Code:200 OK

Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,en-AU;q=0.6,en-GB;q=0.4,te;q=0.2
Access-Control-Request-Headers:access-control-allow-origin, accept, x-requested-with,  content-type
Access-Control-Request-Method:POST
Connection:keep-alive
DNT:1
Host:geojsonlint.com
Origin:http://localhost:8180
Referer:http://localhost:8180/GoogleMapsLoadingTest/MainService? scenario=c&operation=1&objkey=000011&objtype=EQUI&gisuniqkey=hgsfsfsfs2436353535
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (Khtml, like Gecko)  Chrome/34.0.1847.116 Safari/537.36

Response Headers
Access-Control-Allow-Headers:Origin,Content-Type,Accept
Access-Control-Allow-Methods:POST,GET,OPTIONS,PUT,DELETE
Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=utf-8
Date:Thu, 24 Apr 2014 14:48:57 GMT
Server:nginx
Transfer-Encoding:chunked

【参考方案1】：

您不应该将Access-Control-Allow-Origin 设置为请求标头，那是响应标头。

您可以从响应中看到服务器将接受哪些请求标头：

Access-Control-Allow-Headers:Origin,Content-Type,Accept

错误信息告诉你：

Request header field Access-Control-Allow-Origin is not allowed

看起来它可能也不接受X-Requested-With。

【讨论】：

感谢您的澄清，您的建议奏效了，删除 Access-Control-Allow-Origin 和 X-Requested-With 让世界变得与众不同。