Understand in one article │ What is cross-domain? How to solve cross domain?

🎈 What is cross domain

• Domain: means the browser cannot execute scripts from other websites
• Cross-domain: It is caused by the browser's same- origin policy , which is a security restriction implemented by the browser on JavaScript . The so-called same-origin (that is, in the same domain) means that two pages have the same protocol protocol , the host host and the port number port will cause cross-domain

🎈 Cross-domain scenarios

• What are the cross-domain scenarios of the scenario, please refer to the following table

current url	request url	Is it cross-domain	reason
http://www.autofelix.cn	http://www.autofelix.cn/api.php	no	The protocol/domain name/port are all the same
http://www.autofelix.cn	https://www.autofelix.cn/api.php	Yes	different protocols
http://www.autofelix.cn	http://www.rabbit.cn	Yes	Primary domain name is different
http://www.autofelix.cn	http://api.autofelix.cn	Yes	different subdomains
http://www.autofelix.cn:80	http://www.autofelix.cn:8080	Yes	different ports

🎈 Four ways to solve cross-domain

• nginx reverse proxy
• Using nginx reverse proxy to achieve cross-domain is the easiest way to cross-domain
• You only need to modify the configuration of nginx to solve the cross-domain problem, support all browsers, support session , do not need to modify any code, and will not affect server performance

 // nginx配置
server {
    listen       81;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;
 
        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

• jsonp request
• jsonp is a common method for cross-source communication between server and client. The biggest feature is simple application, good compatibility 兼容低版本IE , the disadvantage is that it only supports get request, does not support post request
• In principle, the web page requests json data from the server by adding a <script> element. After the server receives the request, it returns the data in the parameter position of a callback function with a specified name.

 //jquery实现
<script>
$.getJSON('http://autofelix.com/api.php&callback=?', function(res) {
     // 处理获得的数据
     console.log(res)
});
</script>

• Backend language proxy
• You can transfer through a language without cross-domain restrictions, request resources through the back-end language, and then return data
• For example 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 first request the http://www.autofelix.cn php file under ---bc9cd6dacc620fa5efcd883228e7bb4c---, such as http://www.autofelix.cn/api.php , and then return the data through the php file

 // api.php 文件中的代码
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;

• Backend language settings
• Mainly through the back-end language to actively set up cross-domain requests, here php as an example

 // 允许所有域名访问
header('Access-Control-Allow-Origin: *');
// 允许单个域名访问
header('Access-Control-Allow-Origin: https://autofelix.com');
// 允许多个自定义域名访问
static public $originarr = [
   'https://autofelix.com',
   'https://baidu.com',
   'https://csdn.net',
];

// 获取当前跨域域名
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
if (in_array($origin, self::$originarr)) {
    // 允许 $originarr 数组内的 域名跨域访问
    header('Access-Control-Allow-Origin:' . $origin);
    // 响应类型
    header('Access-Control-Allow-Methods:POST,GET');
    // 带 cookie 的跨域访问
    header('Access-Control-Allow-Credentials: true');
    // 响应头设置
    header('Access-Control-Allow-Headers:x-requested-with,Content-Type,X-CSRF-Token');
}