vue使用axios和webpack反向代理跨域

叁歲伎倆 2021-07-26 22:25 487阅读 0赞

axios并不像ajax或者vue-resource那样，它默认post是以Request Payload这种形式来传输的，所以第一次用的时候就被坑到了。不过网上很多解决的方法，我直接就放例子了吧...

以下例子都基于vue-cli 快速创建的那个项目

1.**安装axios **

npm install --save axios

**2. 在入口main.js中导入axios 并将axios写入vue的原型，这样就能更简单的使用。**

import axios from 'axios'
    import Qs from 'qs'
    //QS是axios库中带的，不需要我们再npm安装一个
     
    Vue.prototype.axios = axios;
    Vue.prototype.qs = Qs;

Ps:Qs这个库是帮助我们解决上面的那个坑的,建议使用...

**3.在项目里愉快的使用axios啦**

this.axios.post('/api/test',this.qs.stringify({'name':'xiaoming','sex':'nan'}),{
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            })
              .then(function(res){
                console.log(res.data)
                      //控制台打印请求成功时返回的数据
                   //bind(this)可以不用
              }.bind(this))
              .catch(function(err){
                if(err.response) {
                  console.log(err.response)
                    //控制台打印错误返回的内容
                }
                    //bind(this)可以不用
              }.bind(this))

这段代码可以在vue的mounted钩子或者methos里面使用。this.axios就是上面原型那的效果啦..

'api/test'这里是你要请求的接口。

PS: api 这个我是做了反向代理的(不然的话会跨域)，所以上面的 'api/test' 其实是这样的 : http://192.168.X.XX/test. 其中api对应的就是http://192.168.X.XX，当然这个你可以自己改为 www.baidu.com 或者 http://www.zhanxiong.xyz 等等这样的都可以。

### **Webpack使用代理proxy解决跨域问题** ###

**问题**

在开发中难免会遇到，自己的端口号和服务器的不一样，导致跨域问题，webpack配置文件中可以有效的解决此问题

<table> 
 <thead> 
  <tr> 
   <th>豆瓣api</th> 
   <th>前端地址</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://api.douban.com/v2/book/1220562" rel="nofollow">https://api.douban.com/v2/book/1220562</a></td> 
   <td><a href="http://localhost:8080/" rel="nofollow">http://localhost:8080</a></td> 
  </tr> 
 </tbody> 
</table>

1、 在webpack.dev.config.js配置文件中dev环境添加以下参数，vue项目中，在根目录config文件夹下，index.js中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNzU3NDg5_size_16_color_FFFFFF_t_70][]

proxyTable: {// 当你请求是以/v2开头的接口，则我帮你代理访问到https://api.douban.com
          '/v2/*': {
            target: 'https://api.douban.com', // 你接口的域名
            secure: false, // 如果是https接口，需要配置这个参数
            changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
          }
        },

注意：如果接口地址为：[https://api.douban.com/book/1220562][https_api.douban.com_book_1220562]，不包含v2，需要把/v2替换为空字符串

2、 配置好之后重启下服务  
3、直接访问 [http://localhost:8080/v2/book/1220562][http_localhost_8080_v2_book_1220562] 就可以看到数据了  
![format_png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwNzU3NDg5_size_16_color_FFFFFF_t_70]: /images/20210726/6819c95ae98f4c61b2faa2d153dba0f8.png
[https_api.douban.com_book_1220562]: https://api.douban.com/v2/book/1220562
[http_localhost_8080_v2_book_1220562]: http://localhost:8080/v2/book/1220562
[format_png]: /images/20210726/b37965b3bca446dfbe2de2704855f19f.png