webpack反向代理和开发环境配置

需求：消除跨域请求带来的option预检请求，动态获取请求的url

后端采用nginx（怎么配置我现在没实践过，再过一段时间回来补充~~）

前端采用vue(2.5.2)+axios(0.17.1)+webpack-dev-server(2.11.1)

步骤1： axios配置

const axiosIns =axios.create()

if (process.env.NODE_ENV ==='development') {

axiosIns.defaults.baseURL ='http://*.*.*.*:8080' //内网开发后台地址
}

步骤2：build/config/index.js

proxyTable: {

'/api': {

changeOrigin: true
}
},

proxyTable:不写target的原因在webpack的文档里面有：

当使用内联模式(inline mode)并代理 dev-server 时，内联的客户端脚本并不总是知道要连接到什么地方。它会尝试根据 window.location 来猜测服务器的 URL，但是如果失败，你需要这样。

后面这个但是的情况还没遇到过；

验证配置：1 option请求没有了 2 开发模式下不给axios配置defaults.basrURL的话，请求一样会成功，只不过会被hginx转发到127.0.0.1

配置了defaults.basrURL，请求会发送两次

webpack反向代理和开发环境配置

没有配置defaults.basrURL，没有option请求了

webpack反向代理和开发环境配置

vue init webpack 新建项目，我尝试过这样配置没有问题的或者看我的源码 https://github.com/zaofeng/just_for_base

如有错误欢迎指正，谢谢

爱生活，爱佳佳

秒客网