美文网首页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