Vue.js 本地服务器通过代理方式跨域(获取cookie)

原理是通过将远程api地址代理到本地同源的地址,达到欺骗浏览器的目的
例如前端是 http://localhost:8080,远程api是 http://123.1.1.1:9090
通过代理后,浏览器访问的api也成了http://localhost:8080,再通过代理访问http://123.1.1.1:9090
浏览器 -> http://localhost:8080 -> dev代理(npm run dev) -> http://123.1.1.1:9090
不用去设置后端或服务器

在 config 目录下的 index.js ,是长这个样子的

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {}
    },
    // ...
  }

将 proxyTable: {} 改为:

    proxyTable: {
      '/apis': {    //将http://123.1.1.1:9090印射为/apis
        target: 'http://123.1.1.1:9090', // 接口域名
        secure: false, // 如果是https接口,需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/apis': '' //需要rewrite的,
        }
      }
    },

重新 npm run dev
这样修改后,就只需用 apis/v1/users 代替之前的 http://123.1.1.1:9090/v1/users

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

友情链接更多精彩内容