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 ---- 锚点
    JavaScript知识梳理 - 同源策略/跨域请求(二)_第1张图片

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本人对前端知识的理解总结,如内容知识有错误可以留言修改。

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

你可能感兴趣的:(JavaScript)