AJAX cross domain

Why do cross domain problems occur

Cross-domain: refers to the fact that the browser cannot execute scripts from other websites. It is caused by the browser's same-origin policy, a security restriction imposed by the browser on JavaScript.

E.g:

http://www.abc.com/a/b calls http://www.abc.com/d/c (non-cross-domain)

http://www.abc.com/a/b calls http://www.def.com/d/c (cross-domain: inconsistent domain names)

http://www.abc.com:81/a/b calls http://www.abc.com:82/d/c (cross-domain: inconsistent ports)

http://www.abc.com/a/b calls https://www.abc.com/d/c (cross domain: different protocols)

Although both localhost and 127.0.0.1 point to this machine, they also belong (cross-domain).

How to solve cross-domain problems

1. Use jsonp (not recommended)

The principle of jsonp to solve the cross-domain problem: the script tag of the browser is not restricted by the same-origin policy, and we can access resource files under any domain name in the script tag.

So we can use the script tag to request data from the server, and the server returns a js code with methods and data, the request is completed, and the local js method is called to complete the data processing.

Front end part:

$.ajax({

url:"",

dataType:'jsonp',

data:'',

jsonp: 'callback', //The parameter name passed to the request handler or page to get the name of the jsonp callback function (default: callback)

success: function(result) { //successful processing

});

$.ajax({
            url: "http://localhost:12079/WebForm2.aspx",
            data: "p1=1&p2=2&callback=?",
            type: "post",
            processData: false,
            timeout: 15000,
            dataType: "jsonp", // not "json" we'll parse
            jsonp: "jsonpcallback",
            success: function(result) {
            alert(result.value1);
            }
        });

Compare the difference between json and jsonp formats:

json format:

{

"message":"Get success",

"state":"1",

"result":{"name":"工作组1","id":1,"description":"11"}

}

jsonp format:

callback({

"message":"Get success",

"state":"1",

"result":{"name":"工作组1","id":1,"description":"11"}

}) //The server returns a piece of js code that can be executed by front-end js.

In terms of format, jsonp wraps a method name on the basis of json. This method name is passed from the front-end request. For example, the request address is: http://localhost:1234/index?callback=JSONP_CALLBACK, then the method name It is JSONP_CALLBACK.

Disadvantages of jsonp:

1. JSONP is an unofficial method, and this method only supports the GET method, which is not as secure as the POST method. (It can be understood from the implementation mechanism).

2. The implementation of JSONP requires the cooperation of the server. If the access is to a third-party server, and we do not have the authority to modify the server, then this method is not feasible.

2. Use a server proxy (do not understand)

This method uses the reverse proxy technology of the server to control the access of the client and the server through the proxy server. For example, using nginx as the server proxy, configure the reverse proxy of the client and third-party services on nginx, so that It can be guaranteed that the client and the third party are of the same origin, and the same source comes from the proxy server.

For the reverse proxy configuration of nginx, you can visit my blog: http://blog.csdn.net/csdn_ds/article/details/58605591

Disadvantages of server proxy:

The development is more troublesome, and the development environment is relatively strict, and a proxy server needs to be configured on the local machine.

advantage:

It perfectly solves the problem that third-party services do not have permission to modify using jsonp. The code of the program is less intrusive, and the code level does not need to consider cross-domain issues.

3. Use a server proxy

Add the following code to the requested Response Header:

// Specify to allow other domain names to access

response.setHeader( "Access-Control-Allow-Origin", "*"); // response type

response.setHeader( "Access-Control-Allow-Methods", "POST"); // response header setting

response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");

If you need to specify a domain name to allow cross-domain access, just change Access-Control-Allow-Origin:* to Access-Control-Allow-Origin: Allowed domain name

例如：response.setHeader(“Access-Control-Allow-Origin”,”http://www.client.com”);

shortcoming:

1. This kind of cross-domain solution requires browsers to support H5, because this is the way HTML5 solves cross-domain. If the product is aimed at the PC side, this method may not be a good solution. If it is aimed at mobile phones On the other hand, this method is not a simple, rude way.

2. Set *, there are security risks.

4. Use plugins

A jQuery plugin specially designed to solve cross-domain problems - jquery-jsonp .