vue-cil之axios的二次封装与proxy反向代理使用说明

目录

• Axios与proxy反向代理
• 1、Axios 的特性
• 2、Axios 的安装
• 3、Axios 与proxy反向代理的使用
• axios反向代理proxy个人理解
• 使用反向代理proxy的原因
• proxy基本配置

Axios与proxy反向代理

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1、Axios 的特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 PromiseAPI
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

2、Axios 的安装

npm i axios
# 或者
yran add axios

3、Axios 与proxy反向代理的使用

在要进行使用的文件(request.js)里面导入

// 这是实现 axios 的二次分装
// 导入下载好的包
impront axios from 'axios'
// 创建 axios 实例
const service = axios.create({
    // 添加要对接的后端 url 接口
    // bassUrl: '<url>',
    // 设置超时时间
    timeout: 3000
})
// 请求拦截
service.interceptors.request.use(config => {
    // 可以添加一些响应头信息等
    
    return config
}) 
// 响应拦截
service.interceptors.response.use(res => {
    console.log('请求拦截', res)
    return res
})
// 导出
export default service

如果是对接多个后端接口，前端应用和后端API服务器没有运行在同一个主机上，你需要在开发环境下将API请求代理到 API服务器，就在vue.config.js 中书写如下代码

// vue.config.js
module.exports = {
  devServer:{
      // 更改端口号
      port: 9550,
      // 是否自动打开浏览器
      open: true，
      proxy: {
       // 这里是访问到以 /api 开头的 url 的时候会代理到target 目标上
          '/api': {
              target:'<url>',
              ws: true,
              changeOrigin:true，
              // 重新修改路径
              pathRewrite: {
                  '^/api': ''
              }
          }
      }
  }
}

注：为什么要重新修改路径，因为在发送请求后会在url中多拼接上一个 ’‘ /api ’‘ ，但是我们获取数据又不需要这个才能拿到，所以就要重新修改，把他拿掉；拿掉之后就可以获取到数据了

最后那个地方需要就直接导入service 然后调用就行了

axios反向代理proxy个人理解

使用反向代理proxy的原因

首先需要了解浏览器的同源策略，同源就是说比如你VUE的项目地址是“http://localhost:8080”,而你后端项目启动地址是‘http://localhost:9999’，两者中协议（http）、域名（localhost）相同，但是端口号（：xxxx）vue是8080，而后端是9999不相同，所以产生跨域，需要使用反向代理。（若两者满足协议、域名、端口号相同则不存在跨域问题）。

反向代理在我个人理解就是给你vue项目访问后端资源时给你套上的一个壳，让浏览器认为本次请求是同源的，浏览器就不会进行拦截，数据可以正常返回（类似vpn原理吧）。

proxy基本配置

module.exports = {
    devServer: {
        proxy: {
            '/proxyurl':{
                target:'http://localhost:9999',//起同源作用的url 简单来说就是你要访问的服务器
                //ws: true, 这个是 开启websocket
                changeOrigin: true,//字面意思：更改源点 很多人说是开启跨域 也可以这么理解
                pathRewrite: {
                    '^/proxyurl': '' //还有一种写法是'^/proxyurl': '/' 自测
                }
            }
        }
    }
}

//写个最简单的例子用法
//前端项目地址是 http://localhost:8080
//后端项目地址是 http://localhost:9999
    axios.get("/proxyurl/user/getalluser").then(res => {
        console.log(res);
    });

解释这个例子：

显然我们是通过vue项目访问了后端资源，抛开代理单看这段代码，是以http://localhost:8080/proxyurl/user/getalluser请求资源的。

但是有了反向代理，反向代理看到了你这段url中出现了’/proxyurl‘，反向代理起作用，将’/proxyurl‘前面这段’http://localhost:8080‘替换成了’http://localhost:9999‘，这时候请求资源的url变为‘http://localhost:9999/proxyurl/user/getalluser’。

但是我们又配置了一项pathRewrite: {'^/proxyurl': ''}，'^/proxyurl'是正则表达式，它会匹配你url中的字符串。这一选项的代码意思是，将url中的’/proxyurl‘替换为空字符串。则现在的url是http://localhost:9999/user/getalluser

ps：通常我们会将axios封装，可以在创建axios实例时这样写

export function request(config){
    let axiosInstance = axios.create({
        baseURL: '/proxyurl', //在调用时拼接上后面的url就可以了
        timeout: 5000
    });
    return axiosInstance(config);
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。