CORS (cross-domain resource sharing) cross-domain Problems and solutions

When using AJAX cross-domain requests, the browser error: XMLHttpRequest error:origin null is not allowed by Access-control-allow-origin. Must be a cross-domain problem, if the use of JSONP or proxy to modify the way it would require too much engineering, so the use of cors this relatively simple and efficient technology. Cors is more efficient than the JOSP approach. Jsonp because of its principle, only get requests are implemented, and Cors supports all types of HTTP requests. With Cors, you can use common Ajax to implement cross-domain, which is a great boon for the front end, which is generally supported by most browsers now, because cross-domain is already a common requirement, and browsers will certainly gradually flow out of the appropriate ' backdoor ' to be used exclusively for cross-domain.

Browser support Scenarios

I test in IE browser IE10 and above in order to send the request normally

1. The server-side support for cors is done by setting up Access-control-allow-origin. If the browser detects the appropriate settings, it can allow Ajax to cross-domain access, which is the corresponding ' backdoor '.

Setting Apache:apache requires the use of the Mod_headers module to activate the HTTP header settings, which are activated by default. You only need to modify the httpd.conf file in the Apache configuration file:

Original code

<directory/>
allowoverride None
Require all denied
</Directory>

Change to the following code
<directory/>
Require all denied
Header Set Access-control-allow-origin *
</Directory>

In the PHP file that handles the request, set:

<?php
Header ("access-control-allow-origin:*");
Processing Request output data

?>

The implication of configuration is that any domain-initiated request can fetch data from the current server. Of course, there is a great danger that malicious sites may attack our servers through XSS . So we should try to be targeted to restrict the source of security , for example, the following setting makes only http://wysblog.com/this domain to access the server's API across domains.

In httpd.conf:

Header Set Access-control-allow-origin *

In the PHP file:

<?phpheader ("access-control-allow-origin:http://www.wysblog.com");

　　

Front Code:

<Scripttype= "Text/javascript">functioncreatecorsrequest (method, url) {varXHR= NewXMLHttpRequest ();if ("withcredentials" inchxhr) { //This is the case for cors support//checks if the XMLHttpRequest object has a "withcredentials" property//"Withcredentials" exists only in the XMLHttpRequest Level 2 object} Else { //Otherwise check whether Xdomainrequest is supported//xdomainrequest only exists in IE, is the way IE is used to support Cors requestsXHR= Newxdomainrequest ();} Xhr.open (method, URL,true); Xhr.send (); Xhr.onload= function() {alert (xhr.responsetext);}} Createcorsrequest ('GET', "http://192.168.1.58/t.php"); </Script>

CORS (cross-domain resource sharing) cross-domain Problems and solutions