VUE axios 带请求头 vue 设置请求头

转载

mob64ca14038b36 2023-10-09 07:57:06

文章标签 VUE axios 带请求头 vue 跨域 axios ios 文章分类 iOS 移动开发

1、在`config/index.js`设置配置文件，跨域配置代理

（默认里面内容为空，我们需要加入对跨域接口的配置）

根据接口的不同设置的请求头和主机也不同，自己按照格式要求进行配置即可。

VUE axios 带请求头 vue 设置请求头_跨域

如上图配置好了之后，'/getapis/getCurrentCity'为自定义的axios请求路径，自己根据相应接口功能来命名。后面在用axios请求接口的时候，url路径就要写自定义的这个，那么代理就会自动解析成对应的请求接口了。

注意：修改了配置文件之后要重新启动项目！

2、配置了代理之后，我们就可以使用axios来进行跨域请求受保护的接口了

一般会在额外的js文件中，进行接口请求的参数拼接和请求传回的数据的格式进行处理。这时候这个js文件就需要额外引入axios（注意vue组件js代码块中用的，和js文件用的不一样。我们在这里直接import引入即可使用）：

getCurrentCity.js文件代码如下图代码所示：

参数的拼接：

VUE axios 带请求头 vue 设置请求头_vue_02

axios请求接口返回数据的处理（如果需要处理的话才处理）：

VUE axios 带请求头 vue 设置请求头_ios_03

3、在vue组件中就能调用函数取到到接口数据了

import {getCurrentCity} from 'common/apis/getCurrentCity.js'

export default {
	methods:{
	  _getCurrentCity () {
	  	  // 在这里就可以获取到当前城市的接口数据了
	      getCityCurrent().then((res) => {
	        // 打印出获取到的数据
	        console.log(res)
	      }).catch((err) => {
	        console.log(err)
	      })
    	}
	},
	mounted () {
    	this._getCurrentCity()
  }
}