An AJAX request is sent locally with a JS file, and when the data is fetched to the server, it is reported
Failed to load http://xxx.xx.xx.xxxNo ‘Access-Control-Allow-Origin‘ header is present on the requested resourceOrigin ‘http://localhost:63342‘ is therefore not allowed access.
The reason is that there is a cross-domain, and Ajax can only use the same
What is homologous
The cornerstone of browser security is the "same-Origin policy" (Same-origin policies)
In 1995, the same-origin policy was introduced into the browser by Netscape Corporation. Currently, all browsers implement this policy.
Initially, it means that the Cookie,b page set on page A cannot be opened unless the two pages are "homologous". The so-called "homologous" refers to "three identical".
Same protocol
Same domain name
Same port
For example, http://www.example.com/dir/page.html this URL
Protocol is HTTP//, domain name is www.example.com, port is 80 (default port can be omitted)
It's homologous as follows
Http://www.example.com/dir2/other.html homology
http://example.com/dir/other.html different sources (domain names are different)
http://v2.www.example.com/dir/other.html different sources (domain names are different)
http://www.example.com:81/dir/other.html different sources (ports differ)
1.2 Purpose
The purpose of the homologous policy is to ensure the security of user information and to prevent malicious websites from stealing data.
Imagine a situation where a site is a bank, users log in, and then visit other websites. What happens if other websites can read the Cookie of the A site?
Obviously, if a Cookie contains privacy (such as a total deposit), the information is leaked. What's more scary is that cookies are often used to save a user's login status, and if the user does not log out, the other sites can impersonate the user and do whatever they like. Because the browser also stipulates that the submission form is not subject to the same-origin policy restrictions.
Thus, the "homologous policy" is necessary, otherwise the Cookie can be shared, the Internet is not safe to speak of.
1.3 Limit Range
With the development of the Internet, "homologous policy" is becoming more and more stringent. At present, if the non-homologous, a total of three acts are limited.
(1) Cookies, localstorage and indexdb cannot be read.
(2) DOM is not available.
(3) AJAX requests cannot be sent.
While these restrictions are necessary, they are sometimes inconvenient and reasonable use is also affected.
Original address:
Http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
The local IP and server are not the same origin, so the Ajax send is unsuccessful
Then we have to find a way out, find the information on the Internet.
flask
There's a library to use, http://flask-cors.readthedocs.io/en/latest/.
nginx
can also do
But the demand is actually the front-end want to debug Ajax locally, so do not need to move the server, because this thing has some security problems
So find the simplest way:
Chrome has a Allow-Control-Allow-Origin: *
plug-in called,
Https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
But when this plugin is turned on, the HTML file opened in Pycharm with Chrome will be 404, not a problem, but it can actually be used
Another one is entered in the Mac terminal, note yourname
is the name of the Mac user
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/
This will open an unsafe chrome, equivalent to a sandbox-mode browser
In this chrome you can send AJAX requests, of course, just for testing
Reference:
Http://www.cnblogs.com/mackxu/p/cross-domain.html
Http://www.ruanyifeng.com/blog/2016/04/cors.html
Set chrome across domains on your Mac