JavaScript cross-origin (3): HTTPaccesscontrol (CORS) Cross-Origin

I have read many blogs and documents on the Internet, and I feel like Mozilla is the simplest and best to understand, but the text is very long .. Developer. mozilla. orgen-USdocsHTTPAccess_control_CORS to the entire translation, I certainly can not afford, of course, this is not necessary, the following abstract to say a little, this method still has compatibility problems, do

I have read many blogs and documents on the Internet, and I feel like Mozilla is the simplest and best to understand, but the text is very long .. Https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS to the entire translation, I certainly can not afford, of course, there is no need to this, the following abstract to say a bit, this method still has compatibility problems, do

I have read many blogs and documents on the Internet, and I feel like Mozilla is the simplest and best to understand, but the text is very long ..

Https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

I can't afford to translate the entire article. Of course, this is not necessary. Let's just give a brief introduction here. This method still has compatibility problems. Despite the corresponding solutions, but I think it is not very nice to use it.

Cross-site HTTP requestsAre HTTP requests for resources fromDifferent domainThan the domain of the resource making the request. for instance, a resource loaded from Domain A (http://domaina.example) such as an HTML web page, makes a request for a resource on Domain B (http://domainb.foo), such as an image, usingimgElement (http://domainb.foo/image.jpg). This occurs very commonly on the web today-pages load a number of resources in a cross-site manner, including CSS stylesheets, images and scripts, and other resources.

A cross-site HTTP request is a request (POST, GET, etc.) from one domain name to another, for example, to request an image (http://a.com) from the http:// B .com to the http:// B .com/images.jpg ), this kind of request or phenomenon occurs from time to time, so it is also necessary to find a good way to deal with such problems.

Mozilla said

As follows, we send a request to the page http://foo.example in the http://bar.example:

var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/public-data/';      function callOtherDomain() {   if(invocation) {         invocation.open('GET', url, true);     invocation.onreadystatechange = handler;     invocation.send();    } }

Let's look at the server's response to the browser.

GET /resources/public-data/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Connection: keep-alive Referer: http://foo.example/examples/access-control/simpleXSInvocation.html Origin: http://foo.example     HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 00:23:53 GMT Server: Apache/2.0.61  Access-Control-Allow-Origin: * Keep-Alive: timeout=2, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: application/xml  [XML Data]

These are some data and parameters about HTTP. If you do not understand them, you can refer to this book "HTTP authoritative guide".

The first half is the file header request sent by FF3.5, and the second half is the server response. You should pay attention to the Red words. This is the focus of this article.

Before the request, we can also set some content for the server to respond.

var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/post-here/'; var body = '
 
 
  
   Arun
  
 ';       function callOtherDomain(){   if(invocation)     {       invocation.open('POST', url, true);       invocation.setRequestHeader('X-PINGOTHER', 'pingpong');       invocation.setRequestHeader('Content-Type', 'application/xml');       invocation.onreadystatechange = handler;       invocation.send(body);      }   ......

SetRequestHeader is a parameter used to set the request header.

The above half-day discussion tells you how to set and explain parameters related to servers and clients. Cross-origin is not too involved yet.

Cross Domain [Cross-origin]

This is a piece of code I put on SAES (http://1.qianduannotes.sinaapp.com/test/ACAO.php)

If I do not add the header ("Access-Control-Allow-Origin: *"), an error is returned when you request this data through ajax or other methods, don't believe you can try this link http://1.qianduannotes.sinaapp.com/test/ACAO_none.php

"*" Indicates that all domains can be accessed. If you set Access-Control-Allow-Origin to a specific URL, then the file can only be accessed by a specific URL and Its subdomain (http://yoururl.com/sub.

Compatibility [Compatibility]

Show all versions	IE	Firefox	Chrome	Safari	Opera	IOS Safari	Opera Mini	Android Browser	Blackberry Browser
								2.1
								2.2
						3.2		2.3
						4.0-4.1		3.0
	8.0		24.0			4.2-4.3		4.0
	9.0	19.0	25.0	5.1		5.0-5.1		4.1
Current	10.0	20.0	26.0	6.0	12.1	6.0	5.0-7.0	4.2	7.0
Near future		21.0	27.0						10.0
Farther future		22.0	28.0

The most obvious bug is IE (8, 9), which can be solved through XDomainRequest.

// 1. Create XDR object var xdr = new XDomainRequest(); // 2. Open connection with server using GET methodxdr.open("get", "http://www.contoso.com/xdr.aspx");// 3. Send string data to serverxdr.send();     

The following is a DEMO on MSDN.

XDomainRequest From MSDN