Cross-domain problem, the solution
Cross-domain problems in the daily development process, is a very familiar term. Today's topic, Integrated Project scene before me, the discussion under "cross-domain problem, the solution."
What is cross-domain
Cross-domain problems due to JavaScript for security reasons, the object of other pages do not allow cross-domain calls. In other words, there is only cross-domain JavaScript issues.
Under what circumstances will occur across domains
Access to different sources, even if it is a cross-domain yo. What is considered homologous to it? In general, homologous, that is, the same sources, including host name, protocol and port number.
E.g,
http://blog.720ui.com and http://docs.720ui.com, two domain names are different, there is cross-domain problems.
http://blog.720ui.com and https://blog.720ui.com, are different protocols, there is cross-domain problems
http://blog.720ui.com and http://blog.720ui.com:4000, are a different port number, there is cross-domain problems.
http://blog.720ui.com/java/ and http://blog.720ui.com/about/, although different folder, but it is under the same domain name, the cross-domain issues.
What common cross-domain issues
Now before and after the end of the separation, after service of micro, we often there are many different domain name, in this case, there is a very common cross-domain issues. Therefore, cross-domain problems in the daily development process, is a very familiar term. So, how are we going to solve cross-domain problem?
Road solution
We are how to solve cross-domain problem? Come on, we get to the point.
Scheme I, JSONP (abandoned)
Long long time ago, I have a project has used cross-domain JSONP deal with the problem. Simple to understand, jsonp is json callback with callback function, which is a great program that can be used to solve the problem of the mainstream browser cross-domain data access. However, the limitations of JSONP approach is that, JSONP can only achieve GET request. With the rise of RESTful now, JSONP becomes insufficient. Because, RESTful not only GET, there are POST, PUT, PATCH, DELETE.
Scheme II, CORS (common)
CORS called the Cross Origin Resource Sharing (cross-domain resource sharing). CORS entire communication process, the browser is done automatically, without user intervention. For developers, there is no difference AJAX communication CORS communicate with homologous, exactly as it was. Once AJAX browser cross-origin request, it will automatically add some additional header information, but the user does not have feelings. Therefore, communication is the key to achieving CORS server. Just add the relevant server response headers, you can achieve cross-domain AJAX client makes a request.
It is worth noting that the browser must send a request to pre-OPTIONS request, which is known HTTP server-side method supported for cross-origin requests. In the case of allowing the cross-validation server source of the request, sending the request to the real actual HTTP request method.
Most of our projects take this program, implementation details, not expand, if in doubt, public concern number private letter, or Comments yo.
But, unfortunately, CORS does not support IE8, IE9, if the products are no longer considered compatible with IE lower version, can be ignored, but if the product is compatible with the need to present the country there is a lot lower version of IE market (more than 20 percent) , then this needs to be carefully considered strategy.
Drawings, pictures.
Cross-domain problem, the solution -Nginx Reverse Proxy
Scheme III forwarding intermediate layer structures (common)
What is the core problem is the cross-domain? Access to different sources. Yes, ah, if we convert homologous request, it does not have this problem.
Therefore, before we have a project, set up by the middle layer, of course, be java, can also be a node.js, the request forwarded by the server, in other words, is the dispatcher layer, then the address of the front-end request, it it is forwarded, so a good solution to cross-domain problem.
Of course, if there are considerations of product performance, we need to carefully select the program slightly, because more than the middle layer forwarding, regardless of network overhead, load and performance are to a certain extent.
Option IV, Nginx reverse proxy (common)
First, the product needs to build a transit nginx server is configured to forward the request. Of course, we are based on Nginx as a reverse proxy, it is of course a matter of course.
So, Nginx idea is to judge by parsing the URL address when Nginx, on specific request forwarded by the server.
Say the idea may be a bit dizzy, I draw a map, everyone would understand.
Cross-domain problem, the solution -Nginx Reverse Proxy
When the user requests xx.720ui.com/server1, Nginx forwards the request to a particular application on the server Server1, so as to achieve the purpose of cross-domain.
to sum up
Cross-domain problems in the daily development process, is a very familiar term. We in the development process, more or less dealt with it, therefore, today's topic, Integrated Project scene before me, and JSONP, CORS, intermediate forwarding layer, Nginx reverse proxy four programs summarize the discussion under "cross-domain problem, the solution."
Solutions
Cross-domain problems due to JavaScript for security reasons, the object of other pages do not allow cross-domain calls. If we integrate different domain name to a domain, in other words, is divided by a subdirectory way, it is not able to solve cross-domain problem? So, the idea Nginx reverse proxy is judged by the time Nginx parse the URL address, the request is forwarded on a specific server.
To solve cross-domain problems
Custom local url request rule as http://www.720ui.com/blog corresponds http://blog.720ui.com nginx to be forwarded to the service.
Nginx.conf configuration file, URL forwarding local interface request with a specific prefix to the real physical server to be cross-domain.
Nginx service forwards the request to the real physical server. Nginx service forwards the real physical server returns data to the web end.