Cross-origin Ajax Solution

Recently, in the development process, Ajax is used to asynchronously retrieve images. There is no problem with this function during development. You can test it later and there will be a problem after redeployment. This is the cross-origin issue of Ajax.

Ajax itself does not support cross-origin, because JavascriptSame-origin policy. However, we can use other methods to solve the cross-origin issue of Ajax.

1. Because we use jquery to write Ajax, we are prepared to use jsonp at the beginning. The client is similar to the following method.

 
$. Ajax ({type: "Get", async: false, URL: "http://www.xxx.com/ajax.do", datatype: "jsonp", jsonp: "callbackparam ", // The parameter jsonpcallback of the function name used by the server to receive callback calls: "success_jsonpcallback", // The function name success of callback: function (JSON) {alert (JSON ); alert (JSON [0]. name) ;}, error: function () {alert ('fail ');}});
 

Server-side writing

Public void processrequest (httpcontext context) {context. response. contenttype = "text/plain"; string callbackfunname = context. request ["callbackparam"]; context. response. write (callbackfunname + "([{Name: \" John \ "}])");}
 

This method is actually quite simple, but it is not much changed as we have previously written.

2. Due to the large number of pages we developed in this project, the changes involved a lot. The last step is to directly modify the nginx configuration. I usually understand the reverse proxy, that is, cache, security, and load balancing. So I checked the downstream proxy.

Reverse Proxy, as its name implies, is the reverse proxy function. We use a proxy to access networks that we cannot directly access, or to hide our real identities. Reverse proxy allows external users to access our internal and firewall services without exposing internal servers.

 

Reverse Proxy has the following benefits:

1. Unified Request control, including permission setting and filtering rules;

2. Hide the actual internal service address. Only the reverse proxy server address is exposed;

3. Implement load balancing. Multiple internal servers can be used to form a server cluster, and an external address can be used for access;

4. Solve the cross-origin issue of Ajax.

5. As a buffer for real servers, this solution solves the problem of high load instantly.

After the project is completed, I checked the Ajax cross-origin problem on the Internet and found thatIn HTML, tags of cross-origin resources can be requested for cross-origin purposes. In fact, jsonp uses this method in essence.

There are many tags in HTML that can request cross-origin resources,

Script is undoubtedly the most appropriate. When requesting every script resource, the browser will parse and run the functions defined in the script file, or JavaScript code that needs to be executed immediately. We can return a script or JSON object through the server, execute the parsing in the browser to achieve the purpose of cross-origin requests. Use the script tag to implement cross-origin requests. You can only use the get method to request server resources. The length of parameter passing is also limited by the address bar length.