美文网首页Vue.js专区
Vue.js 本地服务器通过代理方式跨域(获取cookie)

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

作者: IllIIlIlIII | 来源:发表于2019-08-01 03:53 被阅读4次

原理是通过将远程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

相关文章

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/tudfdctx.html