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

同源策略

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进行跨域请求。

jsonp原理

1. 由于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里面装的是返回的数据，再看如下：

$('#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在前端中声明传给后端的函数名字，后端接收之后将数据在传给前端。

1. 在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)
                })

总结

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