Vue3全局配置Axios并解决跨域请求问题示例详解

npm install axios

import axios from "axios";
const api = axios.create(
	{ 
		baseURL: "http://localhost:8081", //这里配置的是后端服务提供的接口
		timeout: 1000 
	}
);
export default api;

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import axios from "./api/request.js"; //引入request.js
import "element-plus/dist/index.css";
import ElementPlus from "element-plus";
const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.provide("$axios", axios);
app.mount("#app");
// 全局挂载 axios
app.config.globalProperties.$axios = axios; //配置axios的全局引用

 <el-button class="login_button" type="primary" @click="login"
      >登录</el-button>
<script setup>
import { reactive } from "vue";
import api from "@/api/request.js"; //引入api
//测试请求方法
const login = function () {
  api({ url: "/test", method: "get" }).then((res) => {
  alert("请求成功!");
  console.log(res);
   		}
   );

@CrossOrigin(origins ="*" ,maxAge = 3600)
    @GetMapping("/test")
    public ApiResult test() {
        return ApiResultHandler.buildApiResult(200, "hello!", null);
    }

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
    /**
     * 当前跨域请求最大有效时长。这里默认1天
     */
    private static final long MAX_AGE = 24 * 60 * 60;
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 1 设置访问源地址
        corsConfiguration.addAllowedOrigin("*");
        // 2 设置访问源请求头
        corsConfiguration.addAllowedHeader("*");
        // 3 设置访问源请求方法
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setMaxAge(MAX_AGE);
        // 4 对接口配置跨域设置
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}