vue使用axios

1.全局注册axios

在mian.js中注册

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {routerConfig} from './router/routerconfig.js'

import axios from 'axios'

Vue.config.productionTip = false

Vue.use(VueRouter)

Vue.__proto__.$axios=axios

new Vue({
  router:routerConfig,
  render: h => h(App),
}).$mount('#app')

2.实例化一个axios

request.js文件

import axios from 'axios'

// 创建 axios 实例
export const request = axios.create({
    // API 请求的默认前缀
    baseURL: 'http://localhost:18080/',
    timeout: 15000 // 请求超时时间
})

const errorHandler = (error) => {
    if (error.response) {
        console.log('axios error' + error.response.status)
    }
    return Promise.reject(error)
}

// request interceptor
request.interceptors.request.use(config => {
    return config
}, errorHandler)

// response interceptor
request.interceptors.response.use((response) => {
    return response.data
}, errorHandler)

3.编写api

api.js

import {request} from "@/request/request";

const url = {
    test: 'api/v1/test'
}

export function test () {
    return request({
        url: url.test,
        method: 'get',
    })
}

4.后端服务配置cors

1.在类或方法上上添加跨域注解

@CrossOrigin(origins = {"*", "null"})

2.配置类
@Configuration

public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }
}