当前位置:网站首页>Cross domain request

Cross domain request

2022-07-04 23:35:00 InfoQ

 
  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
XMLHttpRequest
request , To overcome AJAX Can only
Homology
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(&quot;Access-Control-Allow-Origin:*&quot;);
 header(&quot;Access-Control-Request-Methods:GET, POST&quot;);
 header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');
 echo 'hello cors';
?>
&nbsp; &nbsp; &nbsp; &nbsp; 
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 &quot; preview &quot; 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