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)
},

这样就可以解决同源跨域了

Logo

前往低代码交流专区

更多推荐