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

2018/06/15 10:21
阅读数 148

前言:

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

配置方法:

1. config/index.js

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

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

网络请求封装文件:

//baseUrl本地访问直接用代理,其他环境用配置域名
axios.defaults.baseURL = location.href.indexOf("localhost") > 0 ? "api" : server.DOMIN

如上,如果是本地环境,则直接使用本地代理(这时就跟server.js配置的域名就无关了),否则使用对应环境配置的服务器地址。

后记:

最近一个项目出现跨域问题,后端未能段短时间内处理,所以就不等了,前端改改代码先联调吧。配置过程中发现无法支持https(虽然配置中有secure 这个配置,貌似没用)。

如非必须,不建议前端做代理,原则上前端可以根据运行环境自动选择对应环境的服务器地址,只要和后端约定好,可以做到一次打包,同事支持开发、测试、生产等多种环境的,无需每次打包都要改域名,不仅麻烦,还容易出错。

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部