闸北区网站建设网,wordpress架设系统,旅游网站怎么制作,软件前端开发系列文章目录 文章目录 系列文章目录背景一、部署Axios1. npm 安装 axios2. 创建 request.js#xff0c;创建axios实例3. 在main.js中全局注册axios4. 在页面中使用axios 二、后端解决跨域请求问题方法一 解决单Contoller跨域访问方法二 全局解决跨域问题 背景
对于前后端分离…系列文章目录 文章目录 系列文章目录背景一、部署Axios1. npm 安装 axios2. 创建 request.js创建axios实例3. 在main.js中全局注册axios4. 在页面中使用axios 二、后端解决跨域请求问题方法一 解决单Contoller跨域访问方法二 全局解决跨域问题 背景
对于前后端分离项目前端和后端端口不能重复否则会导致前端或者后端服务起不来。例如前端访问地址为 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部署开始到解决跨域问题。 前端: Vue3Axios 1.6.0 Element-Plus 后端Springboot 2.7.14
这里提供两种解决方案都是基于后端跨域访问的配置前端不作任何允许跨域访问的设置因为试过无效。
一、部署Axios
Axios的基本介绍 1axios 是一个基于promise的HTTP库支持promise所有的API 2浏览器端/node端服务器端都可以使用浏览器中创建XMLHttpRequests 3支持请求响应拦截器 4它可以转换请求数据和响应数据并对响应回来的内容自动转换成 JSON类型的数据 5批量发送多个请求 6安全性更高客户端支持防御XSRF
1. npm 安装 axios
npm install axios2. 创建 request.js创建axios实例
在项目根目录下也就是src目录下创建文件夹api/并创建request.js 该js用于创建axios实例。
import axios from axios;
const api axios.create({ baseURL: http://localhost:8081, //这里配置的是后端服务提供的接口timeout: 1000 }
);
export default api;在这里我们自定义axois实例化对象配置了默认的访问i后端ip和端口等并在末尾使用export 导出api配置便于在其他单文件中引入 request.js.
3. 在main.js中全局注册axios
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的全局引用注意import axois我们引入的不是官方的aoixs库而是自定义的axios.
4. 在页面中使用axios
本页面使用的是Element-plus UI定义一个点击事件: el-button classlogin_button typeprimary clicklogin登录/el-buttonscript 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);});Axios是支持Promise API的不熟悉的朋友可以看Promise API 格式
二、后端解决跨域请求问题
下面是后端解决Axios解决跨域请求的两种方式。
方法一 解决单Contoller跨域访问
方案一在需要访问的Controller接口上添加注解 CrossOrigin(origins * ,maxAge 3600)GetMapping(/test)public ApiResult test() {return ApiResultHandler.buildApiResult(200, hello!, null);}这种方式需要每个访问接口都需要添加比较繁琐。
方法二 全局解决跨域问题
方案二配置跨域请求配置类
自己创建一个confg包创建CorsConfig类。
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;Beanpublic 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);}
}
这个配置好了就可以了其他的不需要动。
结果
