CORS (Cross-Origin Resource Sharing) Cross-Origin Resource Sharing

CORS

Full name: Cross-Origin Resource Sharing

Do you mean cross-origin resource sharing?

Well, there are still few Chinese documents. The only articles that can be searched are almost identical.

CORS is also useful in recent work. Just share it and take notes.

 

We also know that the XMLHttpRequest interface is the root of Ajax, while Ajax prohibits cross-origin access to resources for security reasons.

That is to say, the pages of www.a.com cannot use Ajax to call resources of www. B .com.

Many people will say that jQuery's $. ajax () can be accessed across domains!

Yes, it does. But it's jsonp! There are a lot of Introduction to jsonp.

In fact, the $. ajax () method of jQuery can also implement CORS. As long as the server side works together, jsonp is not required for cross-origin.

 

CORS is a newly added feature in XMLHttpRequest Level 2.

The supported conditions are as follows:

The support is still good (if IE is ignored ).

In addition to Opera Mini, mobile development is not supported, and versions of other devices are well supported.

 

 

Now let's go to practice and talk about how to use it.

1 var xhr = new XMLHttpRequest ();
2 xhr. open ("POST", "http: // www.2cto.com", true );
3 xhr. send (); no error! That's easy!

There is no difference with Ajax calling methods. All you need is server-side cooperation.

 

How to configure the server?

PHP: you only need to use the following code settings.

1 <? Php
2 header ("Access-Control-Allow-Origin: *"); the preceding configuration indicates that any request initiated by a domain can obtain the data of the current server.

Of course, this is very dangerous. Malicious websites may attack our servers through XSS.

If only cross-origin access from www.a.com is supported, then:

1 <? Php
2 header ("Access-Control-Allow-Origin: http://www.a.com"); then the basic configuration is OK ~

 

If you want to send cookies to the server across domains

You also need to set a property: withCredentials

1 var xhr = new XMLHttpRequest ();
2 xhr. open ("POST", "http://www. B .com", true );
3 xhr. withCredentials = true; // supports sending cookies across domains.
4 xhr. send (); of course, you must also set

1 <? Php
2 header ("Access-Control-Allow-Credentials: true ");

 

Well, let's talk about what you need to pay attention.

If you do not use a third-party library and use native javascript for writing, you should pay attention to it in some places.

 

1. Do not set the X-Requested-With Header

For cross-origin access, if header is required, the server must use allow. Otherwise, an error is returned.

SetRequestHeader ("X-Requested-With", "XMLHttpRequest") is mainly used when Ajax calls resources. The server can determine that the request is Ajax.

 

2. INVALID_STATE_ERR: DOM Exception 11

This is a magic error. I found it online and there was no clear answer. But I encountered this problem on the mobile phone!

Tested: this error is reported during CORS access on the UC browser, Safari, and Chrome of IOS4 and IOS5,

Android4.0 native browser, also unable to normal CORS (not tested 2.3 and 2.2)

It is estimated that this error is also reported, but there is no console, so you cannot check the bug.

Chrome and UC under Android4.0 can be smoothly CORS.

I thought it was a problem with browser compatibility. After troubleshooting, I found that...

Let's take a look at the differences between the following two codes?

1 var xhr = new XMLHttpRequest ();
2 xhr. withCredentials = true; // supports sending cookies across domains.
3 xhr. open ("POST", "http://weibo.com/demo/ B /index.php", true );
4 xhr. send (); 1 var xhr = new XMLHttpRequest ();
2 xhr. open ("POST", "http://weibo.com/demo/ B /index.php", true );
3 xhr. withCredentials = true; // supports sending cookies across domains.
4 xhr. send (); the only difference is that xhr. withCredentials = true.

This is the difference. As a result, the first code cannot run smoothly on the mobile phone and the error INVALID_STATE_ERR: DOM Exception 11 is reported!

In the desktop browser, both sections of code can run smoothly!

Therefore, when setting the withCredentials attribute in the future, it must be after the open method!

 

For more information about CORS, see the following reference website.

 

Refer:

Http://www.w3.org/TR/cors/

Http://www.html5rocks.com/en/tutorials/cors/

Https://developer.mozilla.org/en-US/docs/HTTP_access_control (MDN very detailed explanation)

Http://enable-cors.org/index.html (how to configure CORS for different servers)

Http://people.opera.com/tiffanyb/2011/cors/ (CORS test Demo from Opera)

Http://arunranga.com/examples/access-control/ (another CORS test Demo)