跨域

跨域

什么是跨域:

1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等
非同源的及为跨域
同源是指 == 》 协议+域名+端口 都相同,即便两个不同的域名指向同一个ip地址也非同源
同源限制了一下几种行为:
1：cookie.LocalStoage和indexDB无法读取
2：DOM和JS对象无法获得
3：ajax请求不能发送
协议     域名         端口  不管这后面怎么变只要前三个相等就不是跨域
http://www.domain.com:8080/a.js

解决跨域

通过jsonp

原理:在页面引入跨域js和css时,没有存在跨域问题.因此可以动态创建script实现跨域

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参并指定回调执行函数为onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.body.appendChild(script);

    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>

jQuery ajax

$.ajax({
  url:"http://www.domain2.com:8080/login",
  type:"get",
  data:{}
  dataType:'jsonp',
  jsonpCallback:'onBack',
  success:function(data){}
})

vue.js

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => {
    console.log(res); 
})

具体请看https://segmentfault.com/a/1190000011145364

补充一个 form表单提交是不需要进行跨域处理的 但是要转到一个空白页面进行处理 可以用iframe 进行接收 不进行页面跳转