- 在本地开发
Vue的时候，我们可以通过vue.config.js配置devServer。 - 其实服务器那边都是有配置代理的，只是我们本地平常不是特殊情况只需要通过
vue.config.js配置devServer即可。 - 但是当我们需要
原生 html嵌入Vue的时候或者我们不通过vue.config.js配置devServer的时候，我们就需要安装一下本地Nginx配置代理了。 - 下载安装 Nginx 安装之后，启动
Nginx，然后找到nginx.conf，在我们配置的虚拟主机里面添加代理proxy_pass。 nginx.conf，添加代理之后，$ nginx -s reload刷新配置。
server { # 监听端口 listen 8080; # 主机名称 server_name localhost; # 根目录 root /usr/local/var/dzm; # 匹配协议 location / { index index.html; } // 监听包含 /api/ 的链接 location /api/ { // 匹配到后转发到这个域名地址 proxy_pass http://api.test.com/; } }
- Vue 代码中使用
// Vue 生命周期方法 mounted () { axios({ url: 'http://localhost:8080/api/union/center/pageinfo', method: 'get', headers: { 'X-Token': 'slnZOg9VrV8Xo8i5IVudlvRLgmBBlzUTNRMIn6f5EqbkFVnkPmMOJJf1pjN9' } }) .then(res => { console.log(res) }) .catch(err => { console.error(err) }) }
- 当然在使用
axios的时候可以封装一下，将前面http://localhost:8080封装成baseURL，将headers封装到公共配置里面。
但是需要注意的就是/api/这一段一定要跟着url走，不要将它也配置到公用的baseURL里面去，不然会请求失败。
相当于url: '/api/union/center/pageinfo'，axios的公用baseURL: 'http://localhost:8080'，这样配置即可。
