Understand │ what is cross domain? How to solve cross domain problems?

Catalog

• • What is cross-domain
  • Cross domain scenario
  • There are four ways to solve cross domain problems

What is cross-domain

• Domain ： It means that the browser cannot execute scripts of other websites
• Cross domain ： It's run by the browser The same-origin policy Caused by the , It 's the browser JavaScript Security restrictions imposed , The so-called homology （ I mean in the same domain ） Two pages have the same protocol protocol, host host And port number port Will cause Cross domain

Cross domain scenario

• What are the cross domain scenarios of the scenario , Please refer to the table below

There are four ways to solve cross domain problems

• nginx Reverse proxy of
• Use nginx Reverse proxy implementation across domains , It's the easiest way to cross domains
• It just needs to be modified nginx Is configured to solve cross-domain problems , Support for all browsers , Support session, You don't need to change any code , It does not affect server performance

// nginx To configure 
server {
    
    listen       81;
    server_name  www.domain1.com;
    location / {
    
        proxy_pass   http://www.domain2.com:8080;  # Reverse proxy 
        proxy_cookie_domain www.domain2.com www.domain1.com; # modify cookie In the domain name 
        index  index.html index.htm;
 
        #  When used webpack-dev-server Such as middleware proxy interface access nignx when , No browser is involved at this time , So there is no homologous restriction , The following cross-domain configuration is not enabled 
        add_header Access-Control-Allow-Origin http://www.domain1.com;  # The current end is cross-domain only cookie when , for *
        add_header Access-Control-Allow-Credentials true;
    }
}

• jsonp request
• jsonp It is a common method of cross source communication between server and client . The biggest characteristic is simple and applicable , Compatibility is good. Compatible with lower versions IE, The disadvantage is that it only supports get request , I won't support it post request
• The principle of web pages is to add a <script> Elements , Request... From the server json data , After the server receives the request , Put the data in the parameter position of a callback function with a specified name and pass it back

//jquery Realization 
<script>
$.getJSON('http://autofelix.com/api.php&callback=?', function(res) {
    
     //  Process the data obtained 
     console.log(res)
});
</script>

• Back end language agent
• You can transfer it through a language without cross domain restrictions , Request resources through the back-end language , And then it returns the data
• such as http://www.autofelix.cn Need to call http://api.autofelix.cn/userinfo To get user data , Because the subdomain name is different , There will be cross domain restrictions
• You can ask first http://www.autofelix.cn Under the php file , such as http://www.autofelix.cn/api.php, And then through that php The file returns data

// api.php  Code in file 
public function getCurl($url, $timeout = 5)
{
    
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
    $result = curl_exec($ch);
    curl_close($ch);

    return $result;
}

$result = getCurl('http://api.autofelix.cn/userinfo');

return $result;

• Back end language settings
• It is mainly through the back-end language to actively set cross domain requests , Here we use php As a case study

//  Allow access to all domain names 
header('Access-Control-Allow-Origin: *');
//  Allow a single domain name to access 
header('Access-Control-Allow-Origin: https://autofelix.com');
//  Allow multiple custom domain names to access 
static public $originarr = [
   'https://autofelix.com',
   'https://baidu.com',
   'https://csdn.net',
];

//  Get the current cross domain domain name 
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
if (in_array($origin, self::$originarr)) {
    
    //  allow  $originarr  In the array   Domain name cross domain access 
    header('Access-Control-Allow-Origin:' . $origin);
    //  Response type 
    header('Access-Control-Allow-Methods:POST,GET');
    //  belt  cookie  Cross domain access to 
    header('Access-Control-Allow-Credentials: true');
    //  Response header Settings 
    header('Access-Control-Allow-Headers:x-requested-with,Content-Type,X-CSRF-Token');
}