跨域请求的解决方案

什么是同源策略

• 就是当 浏览器前端 向 服务器后端 发送请求时，此时的 发送方地址 和 接收方地址 的 传输协议、域名、端口号有任何一个不一致，那么就请求失败，从而触发了同源策略
• 那当我们的请求触发了同源策略后，该如何解决呢？也就是如何实现跨域请求呢？请继续往下观看。

解决跨域请求

1.jsonp 解决方案

• 通常我们在编写前端页面的时候，会经常用到script、img、link等标签去请求一些外部的数据渲染到页面上，可能你们没有发现，请求的这些数据都是跨域的，但是并没有触发同源策略；因此我们可以肯定这几个标签是不受同源策略限制的。
• 什么是jsonp呢？让其不受同源策略影响的标签帮我发送http请求，这样的请求发起方式我们称之为jsonp。
• 因此我们用 script 标签 来测试一下跨域请求
• 步骤

1.创建一个script标签，script标签里面写好请求目标路径，让script标签发起请求;
2.将创建的script标签放入到页面中
3.然后定义一个全局函数 比如callback 用来接收请求返回的结果

浏览器请求

        document.getElementById("btn").onclick = function(){
            var script_ele = document.createElement("script");
            script_ele.src = "http://localhost/php/day25/代码/06_data.php";
            // console.log(script_ele);
            // 如果想要让script标签可以发起请求那么我们必须要把标签放在页面之中;
            document.body.appendChild(script_ele);
            // 使用完了就删除;
            script_ele.onload = function(){
                script_ele.remove();
            }
        }
       function callback( res ){
            console.log(res);
        }

服务器接收（我们用php 来搭建一个简单的后端，用来返回数据）

<?php
    // 函数调用;
    // 传递一个json对象过来
    // jsonp 规则是这样的 被函数调用包裹的json;
    echo 'callback({"a":10,"b":20})';
?>

此时请求得到的结果就是在后端里执行的callback函数的结果，说明请求成功！实现了跨域请求！

2.CORS 解决方案

用CORS解决跨域请求非常简单，只需要编写一行 后端的代码 即可实现

浏览器请求（用已经封装好的ajax发一个简单的请求路径）

<script>
        ajax({
            url : "http://127.0.0.1/php/day26/04_CORS.php",
            success : function(res){
                console.log(res);
            }
        })
    </script>

服务器接收

<?php
//跨域请求解决代码
    header("Access-Control-Allow-Origin:*");
    echo "hello world";
?>

此时请求得到的结果 hello world ，说明请求成功！实现了跨域请求！

3.代理

就是用本地的服务器作为代理，请求外界服务器，然后将请求的结果返回给浏览器

1.需要修改服务器的配置文件
2.就拿Nginx 服务器来测试
3.需要找到该服务器的目录中的 Nginx1.15.11\conf\vhosts 这个路径中的localhost_80.conf 文件
4.进行代理配置，将其请求的接口路径写进去
5.重启本地服务器

接口路径（百度的接口路径）

location = /baidu {
            proxy_pass https://www.baidu.com/sugrec;
        }

浏览器请求（用已经封装好的ajax发送请求就可以了）

var options = {
            url : "http://localhost/baidu",
            success : function(res){
                console.log(res);
            },
            dataType : "json"
            ,
            data : {
                prod : "pc",
                sugsid : "1423,31169,21125,30839,31187,30823,22159",
            }
        }
        ajax(options)

此时请求得到的结果 就是百度的接口所返回来的结果 ，说明请求成功！实现了跨域请求！