vue-webpack项目本地开发环境设置代理解决跨域问题

本文介绍了一种通过前端配置代理来解决跨域问题的方法。主要步骤包括在config/index.js中设置proxyTable,指定目标接口域名及路径重写规则,并更改接口访问地址。

前言:

一般跨域问题只要后端配置好的话,是不需要前端做处理的,但也不能保证你遇到的所有后端都能很好的处理这个问题,这个时候可能就需要前端设置代理解决这个问题了。

配置方法:

1. config/index.js

  proxyTable: {
        '/api': {
            target: 'http://192.168.8.8:8080', // 要访问接口的域名
            // secure: false,  // 如果是https接口,需要配置这个参数
            changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
            pathRewrite: {
              '^/api': ''//重写接口访问
            }
          }
    },
  host: '192.168.8.1',//本机Ip或localhost

注意:/api一定要有,命名可以不一样。

2. 接口访问地址改为本机访问地址+端口+"/api"

export default
{
  DOMIN:"http://192.168.8.1:8080/api"//本机访问地址+"/api"(也可以用http://localhost:8080/api)
}

重新运行即可。

 

转载于:https://www.cnblogs.com/xyyt/p/9186201.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值