Vue使用axios、解决axios跨域

骑猪看日落 2022-03-06 10:38 647阅读 0赞

### axios ###

[axios文档][axios]

> axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

*  从浏览器中创建 XMLHttpRequests
 *  从 node.js 创建 http 请求
 *  支持 Promise API
 *  拦截请求和响应
 *  转换请求数据和响应数据
 *  取消请求
 *  自动转换 JSON 数据
 *  客户端支持防御 XSRF  
    看起来就很高大上，就决定是它了；但用起来脑子石化，一脸黑人问号，经脉逆流…但是惹不起还是得惹，毕竟它非常流行

##### axios使用处理错误的写法 #####

1.  一个不建议的处理发生错误的代码

axios.get(url)
        .then(response => { 
            console.log(response);
        }, error => { 
            console.log(error);
        })

这不是处理catch的相关，是关于new Promise()的then，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。  
2. catch是处理逻辑或接口出错

axios.get(url)
    .then(res=>{ 
    //处理业务逻辑
    })
    .catch(err=>{ 
    
    })

1.  catch的分步骤处理

if (error.response) { 
    // 请求已发出，但服务器响应的状态码不在 2xx 范围内
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) { 
          // 有请求但未收到响应
          console.log(error.request);
        } else { 
          // 在发生请求时触发的错误
          console.log('Error', error.message);
        }
        console.log(error.config);

### vue cli 2使用axios ###

1.  安装脚手架

cnpm install -g @vue/cli-service-global

1.  现在是vue cli 3,所以我们需要全局安装一个桥接工具

cnpm install -g @vue/cli-init

1.  可以自主选择，根据自己需求，这里选择默认的,然后下载包，最后更改App.vue的内容

vue init webpack axios_test
    cnpm i

1.  下载axios

cnpm i axios -S

1.  提供接口：这里使用某度音乐做测试接口

http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0

1.  在main.js导入并配置

import Axios from 'axios'
    Vue.prototype.$axios  = Axios

1.  App.vue测试

export default { 
      mounted(){ 
        this.$axios.get('http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0')
        .then(result=>{ 
          console.log(result)
        })
        .catch(error=>{ 
          console.log(error)
        })
      }
    };

1.  运行项目

cnpm run dev

我用铜钱算出来你报了一下的错误；这是因为浏览器的同源政策

Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

##### 解决跨域 #####

我们先来实现解决跨域在解释（1.2是实现解决禁止跨域的）

1.  在main.js加入HOST

Vue.prototype.$axios  = Axios
    Vue.prototype.HOST = '/baidu_music_api'

1.  在配置文件config文件夹的index.js里面配置，在里面有个proxyTable配置

proxyTable: { 
          "/baidu_music_api": { 
            target: "http://tingapi.ting.baidu.com",
            changeOrigin: true,
            pathRewrite: { 
                '^/baidu_music_api': '/v1/restserver/ting'
            }
        }
        },

1.  重新再App.vue发送请求

mounted(){ 
        let url = this.HOST + '?method=baidu.ting.billboard.billList&type=1&size=10&offset=0'
        this.$axios.get(url)
        .then(result=>{ 
          console.log(result)
        })
        .catch(error=>{ 
          console.log(error)
        })

1.  配置文件的解释  
    **proxyTable**在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。  
    **target**目标接口域名  
    **changeOrigin**是否跨域  
    **pathRewrite**是重写接口，如果没有包含该项目名或则字段(/v1/restserver/ting)的话，我们可以直接写’/'来代替

--------------------

比如大部分接口有’api’,我们配置的时候时候可以直接（这里跟我们当前接口使用的无关）

proxyTable: { 
        '/api': { 
          target: 'http://www.csdn.com',  //目标接口域名
          changeOrigin: true,  //是否跨域
          pathRewrite: { 
            '^/api': '/api'   //重写接口
            //没有api
            // '^api':'/'
          }
        },

1.  原理解释

'http://localhost:8080/baidu_music_api' ===> 'http://tingapi.ting.baidu.com/v1/restserver/ting'
    本地服务器 --》 代理 --》目标服务器 --》拿到数据后通过代理伪装成本地服务请求的返回值 ---》然后浏览器就顺利收到了我们想要的数据

也就是说我们访问，会重写服务器http://tingapi.ting.baidu.com，baidu\_music\_api就会解析成v1/restserver/ting；有人说可以理解为服务器是没有同源政策的。  
6. 接下来可以看一下我们返回的数据，直接截图  
![在这里插入图片描述][20190318200354740.png]  
以下响应结构的信息；所以我们的数据都要在data里面获取

{ 
      // `data` 由服务器提供的响应
      data: { },
      // `status` 来自服务器响应的 HTTP 状态码
      status: 200,
      // `statusText` 来自服务器响应的 HTTP 状态信息
      statusText: 'OK',
      // `headers` 服务器响应的头
      headers: { },
      // `config` 是为请求提供的配置信息
      config: { }
    }

1.  添加拦截器  
    页面发送http请求，很多情况我们要对请求和其响应进行特定的处理；如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。axios为开发者提供了这样一个API：拦截器。拦截器分为 请求（request）拦截器和 响应（response）拦截器。  
    应用场景:路由拦截、统一处理所有的http请求和响应、refresh\_token换access\_token

Vue.prototype.HOST = '/baidu_music_api'
    // 添加请求拦截器
    Axios.interceptors.request.use(function (config) { 
        if(config.method === "post"){ 
          config.data = qs.stringify(config.data)
        }
        return config;
      }, function (error) { 
        // 对请求错误做些什么
        return Promise.reject(error);
      });
    
    // 添加响应拦截器
    Axios.interceptors.response.use(function (response) { 
        // 对响应数据做点什么
        return response;
      }, function (error) { 
        // 对响应错误做点什么
        return Promise.reject(error);
      });

### vue cli3使用 ###

[vue cli参考配置vue.config.js的devServer配置][vue cli_vue.config.js_devServer]  
可以自主配置（空格是选中），也可以直接选择默认

vue create axios_vue3

1.  项目根目录下新建vue.config.js  
    vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
2.  接着在main.js的文档里面配置(先安装axios)

import Axios from 'axios'
    Vue.prototype.$axios  = Axios
    Vue.prototype.HOST = '/api'

1.  在vue.config.js里面配置

module.exports = { 
    devServer: { 
        proxy: { 
          '/api': { 
            target: 'http://tingapi.ting.baidu.com/v1/restserver/ting',
            ws: true,
            changeOrigin: true
          }
        }
      }
    }

1.  测试axios

mounted(){ 
       let url = this.HOST + '?method=baidu.ting.billboard.billList&type=1&size=10&offset=0'
       this.$axios.get(url).then(result=>{ 
        console.log(result)
       })
      }

![结果][20190318212631613.png]

### 直接使用webpack，没有使用脚手架的,看看这个能否解决 ###

https://webpack.js.org/configuration/dev-server/#devserverproxy

[axios]: https://www.kancloud.cn/yunye/axios/234845
[20190318200354740.png]: /images/20220303/bc8e34fb8b9a4ce2b40efb2271189371.png
[vue cli_vue.config.js_devServer]: https://cli.vuejs.org/zh/config/#devserver
[20190318212631613.png]: /images/20220303/b48c78cb27514d279dd36a82be87ad0e.png