vue跨域问题自记

1. 为啥会跨域呢? 跨域是由于网站有同源策略.
2. 什么是同源? 同源就是协议号,域名,子域名,端口号都相同,就可以说是同源的,只要这三个有不同的,就不是同源的.
3. 为啥要有这个同源策略呢,不是很麻烦吗? 其实同源是浏览器核心的一个功能,如果没有同源,那么可以说网站就是非常的不安全的,随时可能被攻击.
4. 非同源会导致什么呢
   1. 无法读取非同源网站的Cookie、LocalStorage 和 IndexedDB
   2. 无法接触非同源网站的dom
   3. 无法向非同源网站发送AJAX请求
5. 怎么才叫跨域呢?
   1. 非同源,就是跨域
   2. 跨域会报错:Access-Control-Allow-Origin  
6. HTML特殊标签可以跨域: <link> <script> <img> <frame>
   1. <img> 外部引入图片是完全没问题的
   2. <script> 通过cdn来外部引入一些东西的时候就会跨域,但是没问题
7. 常见解决方式
   1. jsonp 利用<script>可以直接跨域的特性来完成
      1. 在页面引进jquery
      2. 发起ajax

      3.  1 <script>
          2    $ajax({
          3         type: "get",
          4         url: "接口地址"
          5         datatype: "jsonp"//这里写成jsonp 6         success: function (response) {
          7          console.log(response)
          8        }
          9    })
         10 </script>

      4. 
   2. CORS 这个只要后台写 header ("Access-Control-Allow-Origin : *")  就代表允许所有的URL请求 前端除非要用cookie
   3. proxy 这个在vue里面用的最多,我喜欢
      1. 通过中间件实现,浏览器有跨域限制但是服务器没有,设置一个代理服务器和浏览器同源,然后浏览器和这个代理服务器数据交换,这个服务器和真的服务器虽然跨域,但是服务器之间不会发生问题,问题就解决了
      2. 需要在vue.config.js里面添加内容,这里不太懂,先放大哥的代码

      3. dev: {
             // 如果后端提供的接口为: /test/where    
             assetsSubDirectory: ‘static‘,
             assetsPublicPath: ‘/‘, 
             proxyTable: {
               ‘/proxyApi‘: {
                 target: ‘http://xxxx.com‘, // 后端提供给你的接口地址
                 changeOrigin: true, // true开启跨域        pathRewrite: {
                   ‘^/proxyApi‘: ‘/proxyApi‘ // 代理api使用方法=> /proxyApi/test/where        }
               }
             }

         好,就先写到这里

原文：https://www.cnblogs.com/Coolcatmenthol/p/14494530.html