preface
When connecting back and forth, we often encounter the error shown above in Ajax, which is a typical cross-domain problem.
What is cross-domain
Cross-domain refers to a way of circumventing the browser’s same-origin policy to restrict requested resources.
Same Origin policy: Allows one Web script to access data from another Web page in a Web browser, provided that the two Web pages have the Same URI, host name, and port number. Once the two Web sites meet the above conditions, they are considered to have the Same source. — Wikipedia
Why is the same-origin policy needed
The same origin policy is a security policy introduced by Netscape in 1995 to prevent XSS(cross-site scripting attack) and CSRF(cross-site request forgery) attacks.
Definition of homology
A source is identified based on whether the protocol, domain name, and port number are consistent. (Note: IP is not the criterion. Different domain names with the same IP address do not belong to the same origin.)
However, in practical applications, we often encounter that the front and back ends do not belong to the same origin, so we need to implement cross-domain access.
How to cross domain
Modifying browser Configurations
Cross domain is a browser mechanism!!
Cross domain is a browser mechanism!!
Cross domain is a browser mechanism!! (Important things say three times)
So as long as we turn off the browser mechanism, we can subtly circumvent this problem.
Different browsers have different Settings. The following uses Chrome as an example
MAC:
- Create a new empty folder
- Open Chrome with command line injection parameters:
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=...
Copy the code–user-data-dir: the directory where you created the new folder
Windows:
-
Create a new empty folder.
-
Right-click Chrome, add –disable-web-security –user-data-dir=…
–user-data-dir: the directory where you created the new folder
In practical application, it is impossible for users to adapt to our requirements and modify the configuration of the browser. Moreover, this method directly shields the same origin policy of the entire page browsing with this browser, which will cause great security problems. Therefore, this method is not commonly used and is not recommended.
Specific request mode
Take advantage of HTML requests that have no cross-domain constraints (script, img, iframe, postMessage…) Request resource data.
A common method is JSONP, which makes use of the principle that script sends GET requests without cross-domain influence. Jsonp registers the global callback function and puts the callback function name into the SCRIPT tag URL as a parameter and sends it to the back end, which dynamically generates the script to call the callback function.
Don’t talk too much, just get to the talent.
Front end:
The backend:
As you can see from the above code, there is a big drawback to this approach: the only way to request is through GET, which is far from satisfying our daily operations.
Cross-domain Resource Sharing (CORS)
Backend modification of the HTTP response header allows the server to indicate that the browser is open to using data from sources other than its own.
Front-end request:
The backend:
Note: when cookie requests are required, XMLHttpRequest withCredentials needs to be enabled on the front end, and the access-control-allow-credentials header needs to be set to true on the back end
The agent
Cross – domain is realized by proxy different source resources to the same path with the front-end
Common nginx configuration:
conclusion
In the case of cross-domain problems, we can start from the above ideas to find a solution more suitable for our business needs, which is also the basic methodology for us to deal with problems and solve problems: starting from the nature of the problem, analyze the problem, find various methods to solve the problem, and find the optimal solution from these methods.
Thank you for your reading. I hope you have learned something from it. If there is any mistake, please correct it.