【Vue.js】Vue3全局配置Axios并办理跨域请求题目

系列文章目次


  

---

配景

对于前后端分离项目，前端和后端端口不能重复，否则会导致前端大概后端服务起不来。比方前端访问地址为： http://localhost:8080/ ，后端访问地址为 http://localhost:8081/ 。后端写好Controller，当用Axios访问该接口时，将会报错：
Access to XMLHttpRequest at ' http://localhost:8081/login ' from origin ' http://localhost:8080 ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
本文内容从axios部署开始到办理跨域题目。
前端: Vue3；Axios 1.6.0 ；Element-Plus
后端：Springboot 2.7.14 这里提供两种办理方案，都是基于后端跨域访问的配置，前端不作任何答应跨域访问的设置，由于试过无效。
一、部署Axios

Axios的根本先容：
（1）axios 是一个基于promise的HTTP库，支持promise全部的API
（2）欣赏器端/node端（服务器端）都可以使用，欣赏器中创建XMLHttpRequests
（3）支持请求／相应拦截器
（4）它可以转换请求数据和相应数据，并对相应返来的内容主动转换成 JSON类型的数据
（5）批量发送多个请求
（6）安全性更高，客户端支持防御XSRF
1. npm 安装 axios

1. npm install axios

复制代码

2. 创建 request.js，创建axios实例

在项目根目次下，也就是src目次下创建文件夹api/，并创建request.js ，该js用于创建axios实例。

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

复制代码

在这里，我们自定义axois实例化对象，配置了默认的访问i后端ip和端口等，并在末端使用export 导出api配置，便于在其他单文件中引入 request.js. 除了定义上述的配置，我就没有在前端配置其他的了，跨域请求在后端配置。
3. 在main.js中全局注册axios

1. import { createApp } from "vue";
2. import App from "./App.vue";
3. import router from "./router";
4. import axios from "./api/request.js"; //引入request.js
5. import "element-plus/dist/index.css";
6. import ElementPlus from "element-plus";
7. const app = createApp(App);
8. app.use(router);
9. app.use(ElementPlus);
10. app.provide("$axios", axios);
11. app.mount("#app");
12. // 全局挂载 axios
13. app.config.globalProperties.$axios = axios; //配置axios的全局引用

复制代码

留意，import axois，我们引入的不是官方的aoixs库，而是自定义的axios.
4. 在页面中使用axios

本页面使用的是Element-plus UI，定义一个点击事件:

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

复制代码

Axios是支持Promise API的，不认识的朋友可以看：Promise API 格式
二、后端办理跨域请求题目

下面是后端办理Axios办理跨域请求的两种方式。
方法一 办理单Contoller跨域访问

方案一：在需要访问的Controller接口上添加注解：

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

复制代码

这种方式需要每个访问接口都需要添加，比力繁琐。
方法二 全局办理跨域题目

方案二：配置跨域请求配置类
自己创建一个config包，创建CorsConfig类。

1. import org.springframework.context.annotation.Bean;
2. import org.springframework.context.annotation.Configuration;
3. import org.springframework.web.cors.CorsConfiguration;
4. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
5. import org.springframework.web.filter.CorsFilter;
7. @Configuration
8. public class CorsConfig {
9.     /**
10.      * 当前跨域请求最大有效时长。这里默认1天
11.      */
12.     private static final long MAX_AGE = 24 * 60 * 60;
14.     @Bean
15.     public CorsFilter corsFilter() {
16.         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
17.         CorsConfiguration corsConfiguration = new CorsConfiguration();
18.         // 1 设置访问源地址
19.         corsConfiguration.addAllowedOrigin("*");
20.         // 2 设置访问源请求头
21.         corsConfiguration.addAllowedHeader("*");
22.         // 3 设置访问源请求方法
23.         corsConfiguration.addAllowedMethod("*");
24.         corsConfiguration.setMaxAge(MAX_AGE);
25.         // 4 对接口配置跨域设置
26.         source.registerCorsConfiguration("/**", corsConfiguration);
27.         return new CorsFilter(source);
28.     }
29. }

复制代码

这个配置好了就可以了，其他的不需要动。
结果：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。