vue axios设置代理跨域
1.下载axiosnpm install axios2.建立一个axios.js文件写入axios配置import Vue from 'vue'import axios from 'axios'import config from '../config'let instance = {timeout: 60 * 1000}const _axios = axio...
·
1.下载axios
npm install axios
2.建立一个axios.js文件 写入axios配置
import Vue from 'vue'
import axios from 'axios'
import config from '../config'
let instance = {
timeout: 60 * 1000
}
const _axios = axios.create([instance])
// 添加请求拦截器
_axios.interceptors.request.use(function (instance) {
// 在发送请求之前做些什么
return instance;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
_axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
Plugin.install = function (Vue, options) {
Vue.axios = _axios
window.axios = _axios
Object.defineProperties(Vue.prototype, {
axios: {
get () {
return _axios
}
},
$axios: {
get () {
return _axios
}
}
})
}
Vue.use(Plugin)
export default Plugin
3.在根目录下创建一个vue.config.js 里面放 proxy代理
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://xxxxx.xxxxx.com', // 目标服务器 代理的地址
changeOrigin: true, // 允许跨域
secure: true, // 支持https
pathRewrite: { '^/api': '/' } // 相当于用'/api'代替target里面的地址,调接口时用/api代替
},
}
}
}
4.举例使用
async getResume1() {
let res = await this.axios({
methods: 'get',
url: '/api/xxxx/xxxxx/login',
headers: {
'id': '1234'
}
})
console.log(res)
},
这样就可以解决同源跨域了
更多推荐
已为社区贡献4条内容
所有评论(0)