Vue 之 跨域

1.使用ngnix

因为服务器和服务器之间是不存在跨域的

前端 -- ngnix -- 服务器

服务器 -- ngnix -- 前端

2.使用cors

前端不需要做任何改变，只需要服务器实现CORS接口，后端设置即可

---

3.配置vue.config.js的proxy

1.完美配置

module.exports = {
  publicPath: '/', // 项目部署的基础路径 我们默认假设你的应用将会部署在域名的根部
  outputDir: 'dist', // 构建好的文件的输出地址
  assetsDir: 'static', // 静态资源打包的地址
  lintOnSave: process.env.NODE_ENV === 'development', // 是否在保存时使用‘eslint-loader’进行检查
  // 有效值: true | false | 'error' ,设置为error时，检查出的错误会触发编译失败
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度  映射文件 打包时使用
  devServer: { // 设置跨域
    port: '9527', // 端口号
    open: true, // 配置自动启动浏览器
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: { // 代理服务器设置
      /**
       * 原理理解： 假设我的本地地址为: http://192.168.163.100:9527 (即http://localhost:9527)
       *            服务器地址为: http://11.12.11.205:9301;
       *            该服务器上的接口为：/api/xxx/xxx
       *            如果我通过axios将接口直接写成
       *            axios.get(http://11.12.11.205:9301/api/xxx/xxx)
       *            那么这个时候从http://192.168.163.100:9527 到 http://11.12.11.205:9301/api/xxx/xxx
       *            是存在跨域限制的。
       *
       *            所以，项目中在设置axios时是这样做的
       *            1. 设置了一个baseURL 为process.env.VUE_APP_BASE_API, 这里我设置的值是'/my_test_proxy'
       *            （process.env.VUE_APP_BASE_API这个环境变量的可以在项目的.env.development文件里配置，
       *              代表调试环境，这个可以自己随意设置一个字符串，最好是复杂一点，能够做到标识,
       *              在.env.production里面将这个变量设置为'',生产环境的url就不会带这个变量了。
       *              这里我们跨域设置都讨论的是调试环境，在生产环境就要通过服务器的nginx配置了,
       *              这里不作讨论）
       *            2. 将axios的接口写成 baseURL+ 接口路径，即 /my_test_proxy +/api/xxx/xxx
       *              (axios会在url前面加上配置的baseURL，这个在axios官网有说明)
       *            3.请求的时候 浏览器上显示的是http://localhost:9527/my_test_proxy/api/xxx/xxx
       *            4.因为有config里面的代理设置，即遇到'/my_test_proxy'，将它前面的地址
       *              代理到http://11.12.11.205:9301，并且允许跨域
       *            5. 并且将'/my_test_proxy'重写为''，即http://localhost:9527 变为
       *              了http://11.12.11.205:9301，'/my_test_proxy'变为了''
       *            6. 那么现在请求到的地址变为http://11.12.11.205:9301/api/xxx/xxx
       *            7. 即成功代理给我们要访问的服务器，并解决了跨域问题
       */
      // process.env.VUE_APP_BASE_API      '/my_test_proxy'
      [process.env.VUE_APP_BASE_API]: { // 当遇到'/my_test_proxy'的时候
        target: `http://11.12.11.205:9301`, // 需要将目前的地址代理至target
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '' // 将'/my_test_proxy' 重写为''
        }
      }
    }
  }
}

01.在.env.development中配置 

 02.在.env.production中配置 

 03.配置axios

扫描二维码关注公众号，回复： 14226653 查看本文章

 04.页面上显示的地址是虚拟的

注:内部是会访问代理中配置的地址 

2.在本地进行测试，打包到线上后需要隐藏(除非target地址不会变)

module.exports = {
    devServer: {
        proxy: {
        '/api': {
          target: 'http://localhost:3000', //服务端地址
          ws: true,
          changeOrigin: true, // 允许跨域
          pathRewrite: {
           '^/api': ''   // 标识替换，使用 '/api' 代替真实的接口地址
          }
        }
      }
    }
  }