Axios与proxy反向代理

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

1、Axios 的特性

• 从浏览器中创建
  
  XMLHttpRequests
  
• 从 node.js 创建
  
  http
  
  请求
• 支持
  
  Promise
  
  API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 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

然后调用就行了