JavaScript知识梳理 - 同源策略/跨域请求(二)

服务器同源策略/解决跨域请求

1.服务器同源策略

• 同源策略，指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。
• 同源指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可。
• 同源策略就是为了保证网站的数据安全而存在。

2.URL构成：

1. url：http://image.baidu.com:80/search/detail?ct=503316480&z=undefined#header
2. http ---- 超文本传输协议
3. [image.baidu.com] ---- 域名
4. 80 ---- 端口
5. /search/detail ---- 资源目录
6. ct=503316480&z=undefined ---- 发送到服务器的数据
7. #header ---- 锚点
   

3.跨域

• 跨域是指在浏览器上进行非同源请求的行为

4.解决跨域问题的办法

1.jsonp方法

//jsonp发送ajax请求
function jsonp(options){
    // 把options.success函数声明为全局函数 'mycallback'
    window[options.callbackName] = options.success;

    // 判断参数，如果是字符串，直接赋值给data
    var data = '';
    if (typeof options.data === 'string'){
        data = options.data;
    }
    // 判断参数，如果是对象，把对象格式化成参数序列的字符串再赋值给data
    if (typeof options.data === 'object' && options.data !== null && options.data.constructor === Object){
        // 把{abc:123,ddd:777} 转成 'abc=123&ddd=777'
        for (var key in options.data){
            data += key+'='+options.data[key]+'&';
        }
        // data = 'abc=123&ddd=777&';
        data = data.substring(0,data.length-1);
    }

    // 创建script标签，并且给src属性赋值（数据地址、参数、参数值）
    var Script = document.createElement('script');
    Script.src = options.url+'?'+ options.cb +'='+options.callbackName+'&'+data;
    document.body.appendChild(Script);

    // script标签加载完成时，删除该标签
    Script.onload = function (){
        document.body.removeChild(Script);
    }
}

1.2.jQuery 发送jsonp请求

$.ajax({
    type: "get", //jsonp只能发送get请求
    async: false,//不异步
    url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
    dataType: "jsonp",//这里吧标注jsonp，jQ就判断发送jsonp请求
    jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名                                 (一般默认为:callback)
    jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动                                             生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
    success: function(json){
        alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
    },
    error: function(){
        alert('fail');
    }
});

2.CORS 跨域资源共享(xhr2)

• CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）
• 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制
• 整个CORS通信过程，都是浏览器自动完成，不需要用户参与
• 对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样
• 实现CORS通信的关键是服务端，只要服务端实现了CORS接口，就可以跨源通信
• 示例：

实现CORS并不难，只需服务端做一些设置即可：如
<?php
header("Access-Control-Allow-Origin:*"); // 允许任何来源
注意：IE10以下不支持CORS

3.代理跨域

• 在服务器上配置代理，然后请求代理标识符D:\phpstudy_pro\Extensions\Nginx1.15.11\conf\vhosts\localhost_80.conf

# 配置代理
        # https://www.duitang.com/napi/vienna/feed/list/by_common/?start=0&limit=18
        # 当我们请求 http://localhost/dt 时，Nginx转发到			 		 https://www.duitang.com/napi/vienna/feed/list/by_common/
        location = /dt {
            proxy_pass https://www.duitang.com/napi/vienna/feed/list/by_common/;
        }

！！！ 以上是DaXiong本人对前端知识的理解总结，如内容知识有错误可以留言修改。

！！！如果以上内容帮助到了你，点击一下赞或者收藏吧！