Understand │ what is cross domain? How 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

<?php
// 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

<?php
//  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');
}