【Vue.js】Vue3全局配置Axios并解决跨域请求问题

系列文章目录

文章目录

  • 系列文章目录
  • 背景
    • 一、部署Axios
      • 1. npm 安装 axios
      • 2. 创建 request.js,创建axios实例
      • 3. 在main.js中全局注册axios
      • 4. 在页面中使用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部署开始到解决跨域问题。

前端: 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

npm install axios

2. 创建 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 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);});

Axios是支持Promise API的,不熟悉的朋友可以看:Promise API 格式

二、后端解决跨域请求问题

下面是后端解决Axios解决跨域请求的两种方式。

方法一 解决单Contoller跨域访问

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

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

这种方式需要每个访问接口都需要添加,比较繁琐。

方法二 全局解决跨域问题

方案二:配置跨域请求配置类

自己创建一个config包,创建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);}
}

这个配置好了就可以了,其他的不需要动。

结果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/132171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Excel·VBA工作表导出为图片

《Excel转图片别再截图啦&#xff01;用这4个方法&#xff0c;高清且无损&#xff01;》&#xff0c;excel转为图片一般方法较为简单&#xff0c;那么能否使用vba将excel转为图片 选中区域导出为图片 zoom设置为2&#xff0c;导出图片较为清晰 Sub 选中区域导出为图片()Dim …

Linux 内核中根据文件inode号获取其对应的struct inode

文章目录 前言一、简介二、LKM demo2.1 iget_locked2.2 LKM demo2.3 ext4_iget 前言 文件inode号和struct inode结构体请参考&#xff1a; Linux文件路径&#xff0c;目录项&#xff0c;inode号关联 Linux文件系统 struct inode 结构体解析 一、简介 在Linux中&#xff0c;每…

web3 React dapp中编写balance组件从redux取出并展示用户资产

好啊 上文WEB3 在 React搭建的Dapp中通过redux全局获取并存储用户ETH与自定义token与交易所存储数量中 我们拿到了用户的一个本身 和 交易所token数量 并放进了redux中做了一个全局管理 然后 我们继续 先 起来ganache的一个模拟环境 ganache -d然后 我们启动自己的项目 顺手发…

Spring底层原理学习笔记--第二讲--(BeanFactory实现与ApplicaitonContext实现)

BeanFactory实现 package com.lucifer.itheima.a02;import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.config.BeanFactoryPostProcessor; import org.springframework.beans.fac…

聚观早报 |小米CarWith启动兼容测试;「天工」大模型开放

【聚观365】11月6日消息 小米CarWith启动兼容测试 「天工」大模型开放 邮政快递揽收超20亿件 华为Mate 60 Pro开启预约申购 VERTU持续探索前沿科技 小米CarWith启动兼容测试 小米CarWith是打造“人车家生态”中不可或缺的一环&#xff0c;在最新升级的2.0版本中&#xff…

Jupyter notebook如何加载torch环境

默认你已经安装了anaconda 和 pytorch 环境。 1&#xff0c;必须要以管理员身份打开 Anaconda prompt终端&#xff0c; 2&#xff0c;进入pytorch环境中&#xff1a; conda activate pytorch_393&#xff0c;安装必要插件&#xff1a; &#xff08;1&#xff09;conda inst…

项目管理之如何识别并应对项目风险

项目风险管理是项目管理中不可忽视的环节&#xff0c;如何识别并应对项目的风险对于项目的成功实施至关重要。本文将介绍风险管理的流程、风险分解结构、定性及定量风险评估方法&#xff0c;以及消极和积极的风险应对策略&#xff0c;旨在帮助读者更好地理解和应对项目风险。 …

win10端口转发

1. 写在前面 核心命令 netsh&#xff0c; 此工具在win10下&#xff0c;支持大量网络相关配置&#xff0c;可参考&#xff1a;netsh官方文档 2. 命令行批模式 在CMD或PowerShell中&#xff0c;执行以下命令&#xff0c; 可能会提示需要管理员权限执行 # 添加转发规则&#x…

使用new_zeros和zeros_like分别返回与输入相同尺寸/类型/device的tensor和ndarray

torch.Tensor.new_zeros(size, dtypeNone, deviceNone) 返回尺寸为size的全为0的tensor&#xff0c;默认&#xff0c;返回的tensor与该tensor具有相同的dtype和device&#xff0c;可以用于在模型训练过程中创建新tensor&#xff0c;并保证该tensor在对应的device上 1&#xff0…

华为政企闪存存储产品集

产品类型产品型号产品说明 maintainProductOceanStor Dorado 2000 SAS 128GB华为OceanStor Dorado 2000是一款简单、可靠、绿色的全闪存存储系统&#xff0c;极简部署、智能运维、轻量便捷&#xff0c;功能齐全&#xff0c;广泛适用于虚拟化、数据库、办公自动化、分支机构等…

Gorm 中的迁移指南

探索使用 GORM 在 Go 中进行数据库迁移和模式更改的世界 在应用程序开发的不断变化的景观中&#xff0c;数据库模式更改是不可避免的。GORM&#xff0c;强大的 Go 对象关系映射库&#xff0c;通过迁移提供了一种无缝的解决方案来管理这些变化。本文将作为您全面的指南&#xf…

最新知识付费变现小程序源码/独立后台知识付费小程序源码/修复登录接口

最新知识付费变现小程序源码&#xff0c;独立后台知识付费小程序源码&#xff0c;最新版修复登录接口。 主要功能 会员系统&#xff0c;用户登录/注册购买记录 收藏记录 基本设置 后台控制导航颜色 字体颜色 标题等设置 流量主广告开关小程序广告显示隐藏 广告主审核过审核…

aardio使用任意版本Python的用法

aardio中调用python的方法有两种,py3 和 process.python模块 py3模块:如果经常要拿到python返回的值或从aardio中传数据给python去处理,aardio和python的交互比较多的话,可以考虑使用py3模块,缺点是:py3模块使用起来比较麻烦些,尤其是在异步多线程操作的话,中间需要学习…

Openssl生成证书-nginx使用ssl

Openssl生成证书并用nginx使用 安装openssl yum install openssl -y创库目录存放证书 mkdir /etc/nginx/cert cd /etc/nginx/cert配置本地解析 cat >>/etc/hosts << EOF 10.10.10.21 kubernetes-master.com EOF10.10.10.21 主机ip、 kubernetes-master.com 本…

使用 Python 进行自然语言处理第 4 部分:文本表示

一、说明 本文是在 2023 年 3 月为 WomenWhoCode 数据科学跟踪活动发表的系列文章中。早期的文章位于&#xff1a;第 1 部分&#xff08;涵盖 NLP 简介&#xff09;、第 2 部分&#xff08;涵盖 NLTK 和 SpaCy 库&#xff09;、第 2 部分&#xff08;涵盖NLTK和SpaCy库&#xf…

什么是数据库迁移

在企业应用程序的上下文中&#xff0c;数据库迁移意味着将数据从一个平台移动到另一个平台。您可能想要迁移到不同平台的原因有很多。例如&#xff0c;一家公司可能决定通过迁移到基于云的数据库来节省资金。或者公司可能会发现某些特定的数据库软件具有对其业务需求至关重要的…

spring-boot中实现分片上传文件

一、上传文件基本实现 1、前端效果图展示&#xff0c;这里使用element-ui plus来展示样式效果 2、基础代码如下 <template><div><el-uploadref"uploadRef"class"upload-demo":limit"1":on-change"handleExceed":auto-…

JavaEE-博客系统3(功能设计)

本部分内容为&#xff1a;实现登录功能&#xff1b;强制要求用户登录&#xff1b;实现显示用户信息&#xff1b;退出登录&#xff1b;发布博客 该部分的后端代码如下&#xff1a; Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws Ser…

mysql 中!= 到底走不走索引?

mysql 中! 到底走不走索引&#xff1f; 很多人疑惑! 到底走不走索引&#xff0c; 这里可以肯定的说该操作是可以走索引的&#xff0c;但实际情况中都为啥都不走索引呢&#xff1f; 首先我们要知道走索引与数据量和数据趋势&#xff08;cardinality&#xff09;有很大的关系&…

异构融合计算技术白皮书(2023年)研读3

读到工业和信息化部电子第五研究所所做的《异构融合计算技术白皮书&#xff08;2023年&#xff09;》&#xff0c;我关注的重点是FPGA与异构计算。续前篇&#xff0c;前篇为第1至4点。 5 运行一致性 P23 运行一致性计算资源分解&#xff0c;裸金属、虚拟机、容器、函数等更小…