是否可以跨域使用 XMLHttpRequest

Question

从 JavaScript 跨站 XMLHttpRequest 可以做到吗？

我了解限制以及为什么它通常无法正常工作，但从 Firefox 3.5 开始，有

Access-Control-Allow-Origin: *

这应该允许它工作。

它告诉浏览器服务器不关心请求是否从不提供页面的域发送给它。

我使用的代码如下。

function sendData(webservicePayload, callbackFunction) {
var request = null;
if (!window.XMLHttpRequest) { // code for IE
    try {
        request = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try {
            request = new ActiveXObject('Microsoft.XMLHTTP');
        } catch (E) {
            return 'Create XMLHTTP request IE';
        }
    }
} else { // code for Mozilla, etc.
    request = new XMLHttpRequest();
}
/*
 * Setup the callback function
 */
request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status < 300) {
        eval(callbackFunction);
    }
};
if (!request) {
    nlapiLogExecution('ERROR', 'Create XMLHTTP request', 'Failed');
    return;
}
/*
 * Setup the request headers
 */

request.open('POST','http://www.another.domain.co.uk/webservice.asmx', true);
request.setRequestHeader('Man','POST http://www.another.domain.co.uk/webservice.asmx HTTP/1.1');
request.setRequestHeader('MessageType', 'CALL');
request.setRequestHeader('Content-Type', 'text/xml; charset="utf-8"');
request.setRequestHeader('Cache-Control', 'no-cache');
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

request.setRequestHeader('SOAPAction','http://www.another.domain.co.uk/WebService/eService');
request.send(webservicePayload);

}

这是发送正确的请求标头

请求

OPTIONS /webservice.asmx HTTP/1.1
Host: www.another.domain.co.uk
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:8.0) Gecko/20100101 Firefox/8.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: https://my.domain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: cache-control,content-type,man,messagetype,soapaction
Pragma: no-cache
Cache-Control: no-cache

并收到预期的响应标头

回复

HTTP/1.1 403 Forbidden
Server: Microsoft-IIS/5.1
Date: Wed, 14 Dec 2011 13:43:27 GMT
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Connection: close
Content-Type: text/html
Content-Length: 44

如您所见，在请求中指定了 Orgin，服务器以接受任何 ("*") 域作为响应。

为什么我会收到“Forbidden 403”，因为我觉得我所做的一切都是正确的，我不知道为什么？

还有其他人得到这个吗？

你知道是什么原因造成的吗？

Answer 1

一个 CORs 请求实际上由两个物理 HTTP 请求组成：1) 预检请求，以及 2) 实际请求。您在上面发布的请求看起来像预检请求，因为它使用 HTTP OPTIONS 方法。因此，您要做的第一件事是验证您的服务器是否接受 OPTIONS 请求（我相信这应该可以正常工作，但它可以解释为什么您会收到 403）。

接下来，您需要一个有效的预检响应。对预检请求的响应还必须包含以下两个标头：

Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Origin,cache-control,content-type,man,messagetype,soapaction

（查看这些响应标头如何与 Access-Control-Request-Method 和 Access-Control-Request-Headers 请求标头相呼应）。 Access-Control-Allow-Headers 标头应包含任何自定义请求标头。

一旦浏览器收到此响应，它就知道预检请求已被接受，并发出实际请求。在实际请求中，您只需要以下标头：

Access-Control-Allow-Origin: *

您可以在此处了解有关预检请求和处理 CORS 请求的更多信息：http://www.html5rocks.com/en/tutorials/cors/