什么是跨域？怎么解决跨域问题呢？看完这篇文章，相信会对你有所启发

目录

跨域的概念

解决跨域的方法

---

跨域的概念

        跨域，指的是浏览器不能执行其他网站的脚本，它是由浏览器同源策略造成的，所谓同源策略是浏览器对JavaScript施加的安全限制：

         同源策略：是指协议（protocol）、域名（host）、端口号（port），都必须相同，其中一个不同都会产生跨域。

不明白没关系，举个栗子：

        http://www.123.com/index.html 调用 http://www.123.com/server.PHP （非跨域）

        http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

        http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

        http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

        http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

        浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

 非同源限制

        1.无法读取非同源网页的cookie、localStorage、IndexedDB

        2.无法接触非同源网页的DOM

        3.无法向非同源地址发送 Ajax请求

------------------------------------------------------------------------

解决跨域的方法

 1.反向代理（推荐）

原理：在请求到达服务器前部署一个服务，将接口请求进行转发 ，通过一定的转发规则来实现将请求转发到其他服务上，来实现不跨域从而解决跨域问题

        反向代理也是Nginx的特点之一，实现反向代理也需要对原Nginx进行代理服务的配置，是前后端分离开发的项目的主流

        通过在前端修改 vue-cli 的配置可解决： vue-cli中的 config/index.js 下配置 dev选项的 {proxyTable}:

　　proxyTable: {
      '/api': {
        target:'http://api.douban.com/v2', // 你请求的第三方接口，真实的请求地址
        changeOrigin:true, //是否跨域，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，
          '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
        }
      }
    },

2.JSONP

原理：有些标签是不受跨域限制的，如：script，img，link，iframe

优点：简单适用，兼容性好（可以兼容低版本的IE）

缺点：只支持get请求，不支持post，数据不安全

核心思想：网页通过添加一个 <script> 元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

1.原生实现（JSONP 需要服务端的支持）

<script src='http://test.com/data?callback=func'></script>
          <!-- 向服务器 test.com 发出请求，该请求的查询字符串有一个 callback 参数，用来指定回调函数的名字 -->
          <!-- 给客户端返回数据 "func('+JSON.stringify(data)+')" ，浏览器把字符串变成 js 表达式执行 -->
　　　　　　<!-- func 需要是一个全局函数 -->
　　　　　　<script type='text/javascript'>
            function func(res){
              // 处理获得的数据
            }
          </script>

2. jQuery 提供了 JSONP 的处理方式

 $.ajax({
          url: 'http://www.test.com:8000/login',
          type: 'get',
          dataType: 'jsonp',// 设置请求方式为 jsonp
          jsonpCallback: 'handleCallback',// 自定义回调函数名 
          data: {}
        })

3.Vue.js

        this.$http.jsonp('http://www.test.com:8080/login', {
          params: {},
          jsonp: 'handleCallback'
        }).then(res => {
          //
        });

（本文转载自：博客园

参考文章链接：(

https://www.cnblogs.com/zhangning187/p/kywt187zn.html

https://www.cnblogs.com/sexintercourse/p/7011427.html

本文只用来学习参考，如有侵权，请联系删除）