When I was young, my dream was to buy a Xiaobawang game console.
The slogan at that time was that Xiaobawang has endless fun~.
I got older, saved enough pocket money, and finally bought it under the guidance of my parents. At
that moment, I felt like the happiest person.
The wind is sweet!
How can I imagine that
when I got home, I was detained by my parents
"" Prohibiting minors from playing game consoles
(I asked the seller, and the seller gave me a conclusion)...
You can buy it if you co-author it, but you can't play it if you play it !
Don't let me play, I'm so angry...
That's lame~
What do things in life have to do with cross-domain, there must be.
The occurrence of cross-domain is caused by the browser's security mechanism, which can only happen when Ajax is used. To put it simply, you can send a request through ajax, but it depends on the face of the remote server. If he is not authorized, the sixth child of the browser will intercept it. This result cannot be used. It is like a game console that cannot be bought or played.
what is cross domain
Cross-Origin means that in web development, the operating environment (domain) of a web page is inconsistent with the domain of the requested resource, that is, the requested target resource is different from the domain name (protocol, domain name, or port) of the current web page.
Web browsers follow the Same-Origin Policy, a security policy designed to prevent potentially malicious websites from stealing user data or conducting other security attacks. The same-origin policy requires that the operating environment of the webpage and the requested resource must have the same protocol, domain name, and port, otherwise the browser will prevent the execution of cross-domain requests.
For example, each website has a domain name or IP address (in fact, the domain name is an alias for the IP address, which is convenient for people to remember). When we visit a website, the browser will download a page locally and parse it to display the graphic page. In order to support more business needs, some additional requests may be initiated on this page. In order to avoid page lag, we use Ajax technology to secretly request data through the back door. It is feasible to sneak through the back door, but the rules must be followed, and requests cannot be made at will.
Suppose the current page is www.qfedu.com, and an Ajax request is sent on this page. The browser allows the request to be sent out, but the requested address is not its own address, but an address like www.1000phone.com/api/xxxx. At this point, the browser checks the response and sees if the server allows any origin to initiate the request. If the server allows it, the browser will allow the request. Otherwise, the browser will report an error, which is a cross-domain problem.
Come on, look at the picture
Green is passable, red is the key point of cross-domain concept
How to handle cross domain
There are three commonly used cross-domain solutions, namely jsonp, cors, proxy
● JSONP (JSON with Padding): The core idea is that the browser only restricts ajax, and does not restrict resources such as pictures, multimedia, css, js, etc. to access other websites. Just take advantage of this feature and use some techniques to solve cross-domain.
JSONP is a technique for making cross-domain requests using <script> tags. By dynamically creating <script> tags in the page, requesting remote server resources, and returning a JSON data wrapped in a function call in the server response, thereby bypassing the restrictions of the same-origin policy. JSONP is suitable for controlled environments where the server needs to cooperate with returning data in JSONP format.
There are limitations, need callback function + cooperation of other server
● CORS (Cross-Origin Resource Sharing): The core idea is to let the server not restrict any visitors. Add some sentences in the response header, and the browser will let it go. It will not be confiscated.
CORS is a standard cross-origin solution that is configured on the server side. The server indicates that requests from a specific domain are allowed to access resources by setting the response header, and the browser judges whether to allow cross-domain requests after receiving the response header. CORS supports simple requests and preflight requests, and is a relatively secure and flexible cross-domain solution.
The node.js type server code is setup as follows:
// // 允许哪些域名请求我
//设置所有页面都可以访问这个服务
resp.setHeader('Access-Control-Allow-Origin', '*')
//只允许设定的几个网站访问
resp.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:7777')
//允许设定多个网站访问
resp.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:7777,http://127.0.0.1:5500')
// // 允许哪些请求方式
// resp.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
// // 允许携带哪些额外的请求头信息
// resp.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With,Content-Type")
There are limitations, and the cooperation of the server is required, and the security of other people's servers is reduced
● Proxy server (Proxy): The core idea is to direct parents to play game consoles. . .
A proxy server is a method of forwarding requests through a backend server. The front-end application sends the cross-domain request to the same-origin server, and then the same-origin server sends the request to the target server and returns the response to the front-end. In this way, the front-end application bypasses the cross-domain problem, because the request is of the same origin. A proxy server is an effective cross-domain solution, especially for situations where the target server's response headers cannot be modified.
This is a better solution
Summarize
We should talk browsers more and mind their own business