The same-origin policy
Homology strategy is a behavior given by the browser
When you send another request , Two addresses will be involved
1. Open the address of the current page
2. The address you want to request
Of the two addresses Port number domain name Transfer protocol
As long as any one is different , It's a non homologous request
Will trigger the same origin policy of the browser
You are not allowed to access the data on this server
The request that triggers the homology policy is called Cross-domain request
private : Ask someone else's server ( Actual combat situation )
First of all :
page (html, js, css, Static resources ) It's on a server
All data , database , On a service
second :
I don't have the qualifications myself , Buy other people's server services
Meituan : Map function
Journalism : Buy Sina's interface , Tencent's interface
Solve the situation that the browser is not allowed to request other people's servers
be based on http agreement
Open the page localhost/index.html
Send a request in the page ajax({ url: './a.php' })
Request address : localhost/a.php
Full address
Open the page http://localhost:80/index.html
Request address http://localhost:80/a.php
1. jsonp
jsonp Cross domain
The same source strategy for browsers , Sending cross domain messages is not allowed ajax request
Use jsonp Approach to achieve cross domain requests
script label
script Tags can perform js Code
script The tag has an attribute called type="text/javascript"
Will regard the code inside as js Parsing
Don't write type When attributes , The default is text/javascript
src attribute
src Is the attribute of introducing external resources
Not affected by homologous strategies
When the above two are added together
As long as you introduce any content , Will be treated as js Code to parse
jsonp At the heart of
utilize script Labeled src attribute
To request data from a non homologous server
As long as this server can return me a string
I'll treat this string as js Code to execute
jsonp Request data
Ask the server to return a Function name () Such a string
Prepare a function in advance
The front end tells the back end what the function name you have prepared is
When sending the request again , Tell the backend in the form of parameters
What is the name of the prepared function
jsonp Common interview questions
1. jsonp principle
src Not affected by homology strategy
script The tag will treat the requested content as js Code to execute
2. jsonp The return value of
character string , Function name () String of form
An executable js Code string
3. jsonp Advantages and disadvantages
advantage
Bypassing the homology strategy , Implement cross domain requests
convenient , Because of script Tag requests in the form of external resources
shortcoming
It's not easy to take security precautions
2.cors - Cross-domain resource sharing
CORS It's a W3C standard , The full name is " Cross-domain resource sharing "(Cross-origin resource sharing) It allows the browser to cross to the source server , issue
request , To overcome AJAX Can only
Restrictions on use .
Cross-domain request , It's not that the request can't be sent
actually : The request has been sent , And to the server , The response page goes back to the browser
But the location of the non homologous browser is judged , You are not allowed to use the data returned by the server
The server tells the browser one thing , This domain name allows me to request my content
header("Access-Control-Allow-Origin:*");
header("Access-Control-Request-Methods:GET, POST");
header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');
php part :
<?php
// Tell the browser that I allow him to ask me
// The response header explains
header("Access-Control-Allow-Origin:*");
header("Access-Control-Request-Methods:GET, POST");
header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');
echo 'hello cors';
?>
Be careful :
Common cross domain request : Only server settings Access-Control-Allow-Origin that will do , There is no need to set the front end , To bring cookie request : Both front and rear ends need to be set . Due to the limitation of homology policy , Read cookie For cross domain request interface in domain cookie, Not the current page .
A simple request :
The browser sends out CORS request . It's in the header message , Add one more
Origin
Field .
It's not a simple request :
It is the kind of request that has special requirements for the server , For example, the request method is
PUT
or
DELETE
, perhaps
Content-Type
The type of field is
application/json
.
It's not a simple request CORS request , Will be before formal correspondence , Add a HTTP Query request , be called " preview " request (preflight).
The browser asks the server first , Whether the domain name of the current web page is in the server's license list , And what can be used HTTP Verb and header fields . Only a positive response , Browser will send out official
XMLHttpRequest
request , Otherwise, it will be wrong .
原网站版权声明
本文为[InfoQ]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/185/202207042323165254.html