浏览器跨域

浏览器跨域：发起请求的域名A和目标域名B之间协议域名或端口有一个不一样就会爆出同源策略这样的错误

 

跨域原理：浏览器有同源策略限制 

 

跨域问题解决办法：

1.前后端配合　　jsonp 被包裹的json

　　是不是浏览器对所有的请求都进行了同源策略？   不是

　　　　没有对图片进行限制

　　　　script的src请求数据没有限制

　　　　link里面的href不受限制

　　让不受同源策略影响的标签发送http请求，这样的请求发起方式我们称之为jsonp

　　测试：创建一个script标签，script标签里面写好请求目标路径，让script标签发起请求

　　　　　标签发起请求的规则：浏览器从上到下读代码，只要读到带有src的script标签，那么浏览器会立即发起一个请求

　　　　　script标签特性：src请求到的数据(字符串)会立即被当作JavaScript执行

　　数据的使用：

　　　　1) 将数据放进变量之中

<script src="http://localhost/php/day25/06_data.php"></script>

console.log(a);

<?php
    echo "var a = 'hello world'";
?>

　　　　　　 虽然把后端的数据放在变量之中我们可以解决程序的跨域问题;

        　(1)如果代码的顺序发生改变那么程序就崩了

       　　(2)全局变量占用变量的命名空间

　　　　2)函数的参数传递（最优解）

　　　　　　全局声明一个函数，请求的数据是一个函数调用

　　　　　　前端: 

        (1)创建一个全局函数,等待调用的时候接受参数

        (2)利用script标签发起一个不受同源策略限制的请求，并将 请求结果当做javascript代码进行执行;

        (3)后端传递给前端的数据需要符合前端函数调用传参规则

function callback( res ){
        console.log(res);
}
// 'callback({"a":10,"b":20})'

<script src="http://localhost/php/day25/06_data.php"></script>

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

2.纯后端解决　　CORS

　　后端添加一个允许的请求头

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

  <?php
            header("Access-Control-Allow-Origin:*");
            header("Access-Control-Request-Methods:GET, POST, PUT,         
            DELETE, OPTIONS");
            header('Access-Control-Allow-Headers:x-requested-    
            with,content-type,test-token,test-sessid');

            echo "hello world";
  ?>

 

3.服务器端解决

　　服务器代理　　（nginx）

　　服务器代理的配置：找到nginx服务器配置文件（如果更改了配置文件，那么必须重启服务器），进行代理配置

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

 

 

 

jsonp的使用：https://www.cnblogs.com/SeventhMeteor/p/14735618.html