关于vue调用接口时产生的跨域问题

在vue项目中，我们会遇到很多调用接口的场景，但是很多小白不知道怎样去处理，今天我们来简单的讲一下这个事情(作为一个小白选手，我也曾被这个简单的问题困扰许久所以想写个帖子作为记录，如果有哪里写的不对的地方请指正)：
什么是跨域
跨域，是源与浏览器的一个同源策略，简单说就是访问的页面域名是 www.a.com，而在此页面中请求接口，请求的是 www.b.com 的接口，出于安全考虑，浏览器默认不允许这样做，便会报错，提示跨域。
当然，如果访问的页面和页面中请求的接口都在一个域名下，就解决跨域了。
解决跨域的方法有很多，适用的场景也不同：

• proxy代理：适用于前端开发调试场景下，使用时只需简单配置，非常方便。
• nginx：适用于线上模式，常用于服务器。（此处不细讲）
• cors：主要用于后端，下载cors包后直接使用即可等其他很多方法。。。

本章主要讲前端使用的proxy代理：
随着时代的发展前后端分离已然成为主流，但是前后端分别是开启的两个不同的服务器，所以也占据了两个不同的端口而造成了跨域，那要如何解决呢？（直接上干货）
首先要在项目的根目录下"vue.config.js"，如果已经有了请忽略这一步在"vue.config.js"中书写如下内容：

module.exports = {
  devServer: {
    proxy: {
      // 将 /api 匹配到 http://localhost:8000
      '/api': {
        target: 'http://localhost:8000',// 后端端口号
        changeOrigin: true, // 能否跨域
        ws: true, // 这里默认是true
        secure: false，
        pathRewite: {
            '/api': '/'
        }
      }
    }
  }
}

当然，我们有时候会遇到一些复杂情况需要配置多个域名时解决方法与上面类似，但是也需要注意一些事情：

module.exports = {
  devServer: {
    proxy: {
    '/api/giao2': {
        target: 'http://localhost:8003',
        changeOrigin: true,
        ws: true,
        secure: false
     },
    '/api/giao1': {
        target: 'http://localhost:8002',
        changeOrigin: true,
        ws: true,
        secure: false
      },
      '/api': {
        target: 'http://localhost:8001',
        changeOrigin: true,
        ws: true,
        secure: false
      },
      '/': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        ws: true,
        secure: false
      },
    }
  },
}

如上代码所示，配置的方式基本大同小异，但是一定要注意前面的'/','/api'...的顺序一定不能乱，如果乱了则会导致配置不生效，原因是这里的匹配实际上是一个正则匹配的过程，当我们请求 /api 时，首先读取到了配置项中的第一个， 拿配置中的 / 去匹配请求中的 /api ， 发现请求的/api 中包含配置项/, 匹配成功， 直接将请求代理到了  http://localhost:8000  上面去， 对/api/action的匹配也同理。 

也就是说，它的匹配规则是： 拿配置项中的地址去匹配请求中的地址， 如果请求中的地址中包含配置中的地址，则匹配成功，否则，拿下一个配置项继续匹配。

所以，配置中的地址与请求地址中匹配的字符越少，匹配度越低。 上例中配置中的地址（/）与请求地址（/api）只有一个字符是匹配的，所以匹配度低。
注意：当配置的代理数量超过十个时，开发环境编译打包时就会报错！

借鉴于此博客，其中有更详细的说明

博客原文（本人多人博客系统，欢迎前来围观）http://project-box.cn/#/Home/details?id=25