浏览器同源策略以及跨域的方法

时间 2020-07-09

原文原文链接

同源策略

1.同源策略是浏览器的一个安全功能，两个页面的协议，端口和域名都相同，则两个页面具备相同的源。
例：https://segmentfault.com:81/u/mount_chan
其中https为协议，segmentfault为域名，81为端口号，三者必须一致的两个页面才能成为同源，才能够进行ajax请求前端

URL	status	reason
https://segmentfault.com:81/u/mount_chan2	success	同源
https://segmentfault.com:80/u/mount_chan	fail	(80)不一样端口
http://segmentfault.com:81/u/mount_chan	fail	(http)不一样协议
https://baidu.com:81/u/mount_chan	fail	(baidu)不一样域名

2.因为同源策略的影响，咱们在实际开发中想要调取其余协议，如百度地图，定位信息等，这些都会限制，所以咱们要想实现功能，就必须用到跨域的方法，这一块我常常用jsonp进行跨域请求。vue

jsonp原理

因为script标签的src和img标签的src，以及link标签的href他们没有被同源策略所限制，所以能够利用这个“漏洞”进行跨域请求。以下面jquery例子。

$('#a').click(function(){
            var frame = document.createElement('script');
            frame.src = 'https://segmentfault.com/write?freshman=1&callback=mount_chan';
            $('body').append(frame);
        });

其中callback里面装的是返回的数据，再看以下：jquery

$('#a').click(function(){
            var frame = document.createElement('script');
            frame.src = 'https://segmentfault.com/write?freshman=chan&callback=mount_chan';
            $('body').append(frame);
        });
        function mount_chan(res){
          console.log(res.message)
        }

咱们声明了一个mount_chan函数,若是服务端接口到get请求，返回的是mount_chan({message:'hello'，chan：chen})，这样的话就能够在服务端把数据经过函数执行传参的方式实现数据传递。如此即可实现jsonp跨域请求。callback在前端中声明传给后端的函数名字，后端接收以后将数据在传给前端。ajax

在vue中使用jsonp。

首先在项目中执行命令

npm install vue-jsonp --save

src/main.js中添加

import vueJsonp from 'vue-jsonp'
Vue.use(vueJsonp)

而后就能够直接使用了

let obj = { 'location':item.point.lat+','+item.point.lng, 'output':'json', 'ak':'\*\*\*' } this.$jsonp('https://api.map.baidu.com/geocoder/v2/', obj).then(res => {
                　　console.log(res) this.
                }).catch(err => {
                　　console.log(err)
                })

总结

同源策略要搞清楚。
jsonp原理以及实现方法，要在实际开发中灵活运用。