vue本地调试 跨域cookie 图片 proxyTable

本文介绍了在使用Vue+Webpack进行单页面应用开发时,如何处理因本地host设置为localhost而导致的cookie无法传递以及ueditor图片上传跨域问题。通过在dev配置中设置proxyTable,将接口host替换为/apis,并修改本地host文件,将测试域名指向localhost,实现了本地调试的顺利进行。

- 当我在使用 vue + webpack 开发单页面的时候,主机host是 localhost,导致本地调试时cookie无法传递,ueditor编辑去图片等跨域无法上传。

解决办法  proxyTable
  • 在dev配置中添加 proxyTable
dev: {
    env: require('./dev.env'),
    port: 80,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/apis': {    //将www.exaple.com印射为/apis
            target: 'http://www.exaple.com',  // 接口域名
            secure: false,  // 如果是https接口,需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '/apis': ''      //需要rewrite的,
            },
        },
    },
    cssSourceMap: false
  }
  • 将测试请求的接口host 改为 /apis 代替原来的域名 http://www.exaple.com

    const host = "/hcj";
  • 修改本地host文件 把 www.exaple.com 置顶到 localhost

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
#127.0.0.1  localhost
255.255.255.255 broadcasthost
::1             localhost
localhost  www.exaple.com
  • npm run dev
正常访问  localhost 就可以跨域传递token
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值