Advanced tutorial 11. Homology strategy / cross domain

This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details ：8 Yuegengwen challenge

One 、 The same-origin policy

1.1 What is homology strategy ？

The same-origin policy (Same-origin Policy)： In order to ensure the information security of the browser , The browser uses the same origin strategy , Ensure that the resources in the current source can only be used in the current source ; If other sources need to use the current source resource , Need special technology , such A Source access B The communication of source resources is called cross domain communication ;

1.2 Example ：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.baidu.com/', true);
xhr.onreadystatechange = function () {
   if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('xxx')
   }
};
xhr.send();

 Copy code 

• The above request will report an error ：

Access to XMLHttpRequest at 'https://www.baidu.com/' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
 Copy code 

When the above error occurs, it indicates that you are conducting a cross domain operation ;

1.3 Requirements of homology strategy ：

The homology strategy requires the protocol of two sources of communication 、 domain name 、 The port number should be the same , If any of the three is different, it does not meet the homology strategy ; Communication that does not satisfy the same origin policy is cross domain ;

1.4 Common cross domain solutions ：

1. JSONP
2. Server forwarding , Because the same origin policy exists only on the client , It doesn't exist on the server ; So the server can forward the request ;
3. nginx forward ,nginx It's a server application , It can accept requests from clients , Automatic forwarding can then be configured according to the rules ;
4. CORS: Cross-Origin-Resource-Sharing: Target domain settings are required Access-Control-Allow-Origin Header information ;

Two 、JSONP

JSONP It is a common way to solve cross domain problems ;

2.1 principle ：

utilize script Of src Attributes are not constrained by the same source policy , You can access data under different servers or port numbers

1. Declare in advance that one is called fn Function of , to fn Set a formal parameter ;
2. Give... On the page script Of src The path pointing to splices a callback attribute ,callback=fn; When the browser resolves to this script When labeling , Will send to src The path pointed to http request ;
3. When the server receives the request , Will return a fn( Here is the data returned by the server )
4. fn({xxx}) This is let fn perform , Inside the parentheses are the data sent to us by the server

2.2 Example ：

JS Code ：

function fn(data) {
   console.log(data);
}
 Copy code 

HTML Code

<script src="http://matchweb.sports.qq.com/kbs/calendar?columnId=100000&callback=fn"></script>
 Copy code 

3、 ... and 、CORS

3.1 Definition

CORS: 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 It can only be used in the same source .

Use CORS To solve cross domain problems , By agreement HTTP The response header information informs the client of the current cross domain permission , The following header information is common ：

1. Access-Control-Allow-Headers Allowed request headers ,* Express arbitrarily ;
2. Access-Control-Allow-Methods Methods used in cross domain access , Common methods GET,PUT,POST,DELETE,OPTIONS ;
3. Access-Control-Allow-Max-Age Set a cache period for cross domain configuration information , such as 10s, identification 10s Don't send it again OPTIONS Request to inquire about cross domain configuration ;
4. Access-Control-Allow-Credentials, Set whether to allow carrying cookie,true Is it allowed to carry cookie Come on , If you don't set this value , The target source cannot set the client's cookie

3.2 An example

Here is one Nodejs Easy to develop server Code ：

const http = require('http');
const fs = require('fs');
const path = require('path')
const url = require('url');


http.createServer((req, res) => {
  let { pathname, query } = url.parse(req.url, true)
  let method = req.method.toUpperCase()
  res.setHeader('Access-Control-Allow-Headers', 'token'); 
  res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
  res.setHeader('Access-Control-Allow-Max-Age', '10'); 
  res.setHeader('Access-Control-Allow-Credentials', true); 

  // res.setHeader()
  if (method === 'OPTIONS') {
    return res.end();
  }
  if (pathname === '/user') {
    switch (method) {
      case 'GET':
        res.end(JSON.stringify({ name: 'ok' }))
        break
      case 'POST':
        let arr = []
        req.on('data', chunk => arr.push(chunk))
        req.on('end', () => {
          let r = Buffer.concat(arr).toString()
          res.setHeader('Set-Cookie', 'a=333333')
          res.end(JSON.stringify({b: 'post'}))
        })
    }
    return
  }

  let filepath = path.join(__dirname, pathname)

  fs.stat(filepath, (err, statObj) => {
    if (err) {
      res.statusCode = 404;
      return res.end('not found')
    }
    if (statObj.isFile()) {
      return fs.createReadStream(filepath).pipe(res)
    }
    res.statusCode = 404;
    res.end('not found')
  })
}).listen(8081, () => {
  console.log('ok 8081')
})
 Copy code 

3.3 matters needing attention

3.3.1 form Forms

form There is no cross domain problem in the submission of forms ,form The submission of can be submitted to any source ;

<form action="http://www.unkown.com/some/path/app.php" method="get">
  <p>First name: <input type="text" name="f_name" /></p>
  <p>Last name: <input type="text" name="l_name" /></p>
  <input type="submit" value="Submit" />
</form>
 Copy code 

3.3.2 Complex requests and OPTIONS

When the browser recognizes that this is a cross domain behavior , If the request is a complex request, a OPTIONS request , Ask the server whether cross domain and other related configurations are allowed ;

GET/POST It's all simple requests , If the request contains a custom request header, it will become a complex request , At this time, the browser automatically sends OPTIONS request , And then get the correct CORS Only after the response will the real request be initiated . If the server OPTIONS The request did not return , Or the return is incorrect , It will not reply to sending the real request and throw the error of homology policy restriction ;

 Copy code