Ajax cross-domain problem is very common, there are more solutions such as: JSONP, set the server to allow cross-domain, to request and proxy, and so on, I am commonly used in the project node. JS to build intermediate agent solution. I will try to solve the cross-domain problem in the way of Nginx proxy.
Step One: Build the server API, which is not set to allow cross-domain. Get method to return the list of heroes. (http://localhost:8081/heroes)
Step two: Write the page to test the AJAX request (Http://localhost:8081/heroes), and the results are displayed across domains.
By the way: if you want to modify the server side only need to set the following:
Step Three: Modify Nginx configuration file
Configuration code:
Location =/heroes {
Add_header ' Access-control-allow-origin ' *;
Add_header ' Access-control-allow-methods ' GET, POST, OPTIONS ';
Add_header ' Access-control-allow-headers ' Dnt,x-customheader,keep-alive,user-agent,x-requested-with, If-modified-since,cache-control,content-type,content-range,range ';
Add_header ' Access-control-expose-headers ' Dnt,x-customheader,keep-alive,user-agent,x-requested-with, If-modified-since,cache-control,content-type,content-range,range ';
Proxy_pass http://localhost:8081;
}
Fourth step: Test the AJAX request, this time change the second step of 8081 to 80, so that the AJAX request is Ngnix Proxy, can get results.
Nginx solves the problem of Ajax cross-domain.