参考：https://blog.csdn.net/mobile18611667978/article/details/100545882
    概念
    什么是同源策略
    同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
    所谓同源是指：协议、域名、端口都相同
    什么是跨域
    跨域就是不同源，就是不满足协议、域名、端口都相同的约定
    如：看下面的链接是否与 http://www.test.com/index.html 同源？
    http://www.test.com/dir/login.html 同源
    https://www.test.com/index.html 不同源 协议不同(https)
    http://www.test.com:90/index.html 不同源 端口不同(90)
    http://www.demo.com/index.html 不同源 域名不同(demo)
    跨域请求devServer代理几种配置
    1：先在项目的根目录下新建 vue.config.js 文件
    2：在module.exports内设置devServer来处理代理
    假设我们要把http://localhost:8081/allin/policy/getProductInfo 中的域名换成 www.test.com 相当于把请求换成 http://www.test.com/allin/policy/getProductInfo
    第一种代理方式
    把请求的url写成/allin/policy/getProductInfo
    注意
    请求的地址必须是/allin/policy/getProductInfo，而不是http://localhost:8081/allin/policy/getProductInfo，（下面的几种方式也是同样的）因为代理会检查请求开头是否为/allin，如果以http开头，则检查不匹配，则不走代理

    1. devServer: {
    2.     proxy: {
    3.         '/allin': {
    4.             //要访问的跨域的域名
    5.             target: 'http://www.test.com',
    6.             ws: true, // 是否启用websockets
    7.             //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
    8.             changOrigin: true,
    9.         }
    10.     }
    11. }
    12. • 1
    13. • 2
    14. • 3
    15. • 4
    16. • 5
    17. • 6
    18. • 7
    19. • 8
    20. • 9
    21. • 10
    22. • 11

    相当于遇见/allin才做代理，则会把默认域名http://localhost:8081地址改成 target 对应的http://www.test.com地址，但是在浏览器的F12下，Network->Headers中看到还是http://localhost:8081/allin/policy/getProductInfo， 但是真正的请求的地址则是http://www.test.com/allin/policy/getProductInfo
    注意
    如果只是修改域名，则不需要写pathRewrite，但如果要写，则必须写成pathRewrite: {’^/allin’: ‘/allin’}，相当于把/allin标识还替换成/allin
    第二种代理方式
    把请求的url写成/api/allin/policy/getProductInfo

    1. devServer: {
    2.      proxy: {
    3.          '/api': {
    4.              //要访问的跨域的域名
    5.              target: 'http://www.test.com',
    6.              ws: true,
    7.              changOrigin: true,
    8.              pathRewrite: {
    9.                  '^/api': ''
    10.              }
    11.          }
    12.      }
    13.  }
    14. • 1
    15. • 2
    16. • 3
    17. • 4
    18. • 5
    19. • 6
    20. • 7
    21. • 8
    22. • 9
    23. • 10
    24. • 11
    25. • 12
    26. • 13

    相当于遇见/api才做代理，但真实的请求中没有/api，所以在pathRewrite中把’/api’去掉, 这样既有了标识, 又能在请求接口中把/api去掉
    第三种代理方式
    把请求的url写成/allin/getProductInfo
    注意
    这里请求时我没有写/polic，目的是在拦截跨域是我再加上

    1. devServer: {
    2.     proxy: {
    3.         '/allin': {
    4.             //要访问的跨域的api的域名
    5.             target: 'http://www.test.com',
    6.             ws: true,
    7.             changOrigin: true,
    8.             pathRewrite: {
    9.                 '^/allin': '/allin/policy'
    10.             }
    11.         }
    12.     }
    13. }
    14. • 1
    15. • 2
    16. • 3
    17. • 4
    18. • 5
    19. • 6
    20. • 7
    21. • 8
    22. • 9
    23. • 10
    24. • 11
    25. • 12
    26. • 13

    相当于遇见/allin则替换成/allin/policy，注意/policy后边没有/，这样拼接成功才会是http://www.test.com/allin/policy/getProductInfo
    第四种代理方式
    把请求的url写成/allin/getProductInfo
    注意
    这里请求时我没有写/polic，目的是在拦截跨域是我再加上

    1. devServer: {
    2.      proxy: {
    3.          '/allin': {
    4.              //要访问的跨域的api的域名
    5.              target: 'http://www.test.com/allin/policy',
    6.              ws: true,
    7.              changOrigin: true,
    8.              pathRewrite: {
    9.                  '^/allin': '/'  //必须这样写
    10.              }
    11.          }
    12.      }
    13.  }
    14. • 1
    15. • 2
    16. • 3
    17. • 4
    18. • 5
    19. • 6
    20. • 7
    21. • 8
    22. • 9
    23. • 10
    24. • 11
    25. • 12
    26. • 13

    这里/allin相当于http://www.test.com/allin/policy
    这里必须要写pathRewrite: { ‘^/allin’: ‘/’}，而且里边必须要写成’^/allin’: ‘/’，这里的斜杠代表的意思就是使用target中的/allin/policy，否则就要使用上面的方式把斜杠写成/allin/policy，并把target中只写域名，如果不写pathRewrite则请求不会成功。
    注意
    pathRewrite：如果不写则只能修改代理的域名，如果写则可以修改代理的域名和后边的路径
    使用场景
    我们开发的Vue项目大部分是用在App内的，而当我们写好一个功能后，如果想在真机上看看效果，那必须要提交到测试环境，然后App内配置好测试地址才可以正常访问。那我们能不能直接让App访问我们自己的IP地址呢，这样的话当在真机上出现问题时，可以先修改，避免了把错误的代码提交到测试环境上，而我们如果直接这么写，肯定会报跨域的问题，这里就需要用到代理机制了。我们就按照上面的几种方式设置代理就可以让App访问我们自己的机器上的代码了