当前位置: 首页 > news >正文

Axios跨域请求处理

问题背景:
vue 项目用 axios 进行请求的时候,总是报“Access to XMLHttpRequest at ‘http://localhost:8889/api/login’ from origin ‘http://localhost:8080……’”的错误


实际上就是前后端分离的情况下,发生了跨域的问题
跨域定义:
在这里插入图片描述
解决方案:vue-cli转发+SpringBoot后端配置

本次问题用到了vue-cli的请求代理devServer.proxy,强烈建议查看官网vue-cli请求代理

本次问题产生背景:
在这里插入图片描述
springboot版本:2.5.0,提一下这个主要是因为SpringBoot升级2.4.0之后,跨域配置中的.allowedOrigins不再可用,所以跨域配置需要更改

前端配置(Vue+Axios)

在这里插入图片描述
在这个文件中添加配置,现在是默认配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,
})

加入配置代理
本次问题背景:
前后端分离,前端场景:localhost:8080
后端场景:localhost:8889
前端发出请求,虽然域名相同,但是端口号不同,就会被判定为跨域
所以加入了代理,把8080发出的请求代理到8889的端口(域名也是一个道理),让server认为是同一个域名,同一个port发出的请求,避免了跨域

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,devServer: {proxy: {'/api': {target: 'http://localhost:8889/', //填写请求的目标地址(将请求转发到的目标主机,这样请求就会被认为是同源)changOrigin: true, //允许跨域pathRewrite: {'^/api': '' //请求的时候使用这个api就可以}}}}
})

解读一下:
在这里插入图片描述
其他配置:
在这里插入图片描述

至此前端配置完毕,看一下请求的方法
在这里插入图片描述

后端配置(SpringBoot)

跨域配置

package com.cc.blog.admin.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOriginPatterns("*").allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS").allowCredentials(true).maxAge(3600);}}

测试

响应成功
在这里插入图片描述

相关文章:

Axios跨域请求处理

问题背景: vue 项目用 axios 进行请求的时候,总是报“Access to XMLHttpRequest at ‘http://localhost:8889/api/login’ from origin ‘http://localhost:8080……’”的错误 实际上就是前后端分离的情况下,发生了跨域的问题 跨域定义&…...

Docker(二) Docker容器

在docker中的容器都是由镜像所创建的,一个镜像可以创建多个容器。 一、调试Docker 启动Docker systemctl start docker 查看Docker中有哪些镜像 docker images 下载镜像 docker pull hello-world 运行镜像 docker run hello-world 出现 Hello from Docker! 这…...

【业务功能篇81】微服务SpringCloud-ElasticSearch-Kibanan-docke安装-入门实战

ElasticSearch 一、ElasticSearch概述 1.ElasticSearch介绍 ES 是一个开源的高扩展的分布式全文搜索引擎,是整个Elastic Stack技术栈的核心。它可以近乎实时的存储,检索数据;本身扩展性很好,可以扩展到上百台服务器,…...

【UniApp开发小程序】私聊功能uniapp界面实现 (买家、卖家 沟通商品信息)【后端基于若依管理系统开发】

文章目录 效果显示WebSocket连接使用全局变量WebSocket连接细节 最近和自己聊天的用户信息界面效果界面代码最近的聊天内容太长日期时间显示未读消息数量显示 私聊界面界面展示代码实现英文长串不换行问题聊天区域自动滑动到底部键盘呼出,聊天区域收缩,聊…...

【BASH】回顾与知识点梳理(三十六)

【BASH】回顾与知识点梳理 三十六 三十六. 认识与分析登录档36.1 什么是登录档CentOS 7 登录档简易说明登录档的重要性Linux 常见的登录档档名登录档所需相关服务 (daemon) 与程序CentOS 7.x 使用 systemd 提供的 journalctl 日志管理 登录档内容的一般格式 36.2 rsyslog.servi…...

十三、pikachu之暴力破解

文章目录 1、暴力破解概述2、基于表单的暴力破解3、验证码的绕过3.1 验证码的认证流程3.2 验证码绕过(on client)3.3 验证码绕过(on server)3.4 token防爆破? 1、暴力破解概述 “暴力破解”是一攻击具手段,…...

用手势操控现实:OpenCV 音量控制与 AI 换脸技术解析

基于opencv的手势控制音量和ai换脸 HandTrackingModule.py import cv2 import mediapipe as mp import timeclass handDetector():def __init__(self, mode False, maxHands 2, model_complexity 1, detectionCon 0.5, trackCon 0.5):self.mode modeself.maxHands max…...

【leetcode 力扣刷题】移除链表元素 多种解法

移除链表元素的多种解法 203. 移除链表元素解法①:头节点单独判断解法②:虚拟头节点解法③:递归 203. 移除链表元素 题目链接:203.移除链表元素 题目内容: 理解题意:就是单纯的删除链表中所有值等于给定的…...

leetcode503. 下一个更大元素 II 单调栈

思路: 与之前 739、1475 单调栈的问题如出一辙,唯一不同的地方就是对于遍历完之后。栈中元素的处理,之前的栈中元素因无法找到符合条件的值,直接加入vector中。而这里需要再重头遍历一下数组,找是否有符合条件的&…...

Oracle中列的维护

由于商业环境中,数据是不断变化的,客户的需求也是不断变化的,所以当一个表用了一段时间后,其结构就有可能需要变化。 而在Oracle中,提供了alter table这种方式来改变列。 从Oracle9.2版本之后: 如果需要变…...

后端项目开发:分页功能的实现(Mybatis+pagehelper)

分页查询是项目中的常用功能&#xff0c;此处我们基于Mybatis对分页查询进行处理。 引入分页依赖 <!-- pagehelper --> <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId>…...

SpringBoot集成Drools

一:简介 规则引擎全称为业务规则管理系统(Business Rule Management System)简称BRMS,主要思想是将应用程序中的业务决策部分分离开来,并使用预定义的语义模块编写业务决策(业务规则),由用户或开发者在需要时进行配置、管理。 其实就是将计算逻辑写在脚本中,通过Jav…...

React创建组件的三种方式及其区别是什么?

在React中&#xff0c;创建组件的三种主要方式是函数式组件、类组件和使用React Hooks的函数式组件。以下是对每种方式的详细解释以及它们之间的区别&#xff1a; 1、函数式组件&#xff1a; 函数式组件是使用纯粹的JavaScript函数来定义的。它接收一个props对象作为参数&…...

W6100-EVB-PICO进行UDP组播数据回环测试(九)

前言 上一章我们用我们的开发板作为UDP客户端连接服务器进行数据回环测试&#xff0c;那么本章我们进行UDP组播数据回环测试。 什么是UDP组播&#xff1f; 组播是主机间一对多的通讯模式&#xff0c; 组播是一种允许一个或多个组播源发送同一报文到多个接收者的技术。组播源将…...

Qt 阴影边框

阴影边框很常见&#xff0c;诸如360以及其他很多软件都有类似效果&#xff0c;了解CSS3的同学们应该都知道box-shadow&#xff0c;它就是来设定阴影效果的&#xff0c;那么Qt呢&#xff1f;看过一些资料&#xff0c;说是QSS是基于CSS2的&#xff0c;既然如此&#xff0c;box-sh…...

前端面试:【性能优化】页面加载性能、渲染性能、资源优化

嗨&#xff0c;亲爱的前端开发者&#xff01;在今天的Web世界中&#xff0c;用户期望页面加载速度快、交互流畅。因此&#xff0c;前端性能优化成为了至关重要的任务。本文将探讨三个关键方面的性能优化&#xff1a;页面加载性能、渲染性能以及资源优化&#xff0c;以帮助你构建…...

从按下电源键到进入系统,CPU在干什么?

本专栏更新速度较慢&#xff0c;简单讲讲计算机的那些事&#xff0c;简单讲讲那些特别散乱杂的知识&#xff0c;欢迎各位朋友订阅专栏啊 感谢一路相伴的朋友们 浅淡操作系统系列第2篇 目录 通电 保护模式和实模式 内存管理单元MMU 逻辑地址&#xff1f;物理地址&#xff1…...

TypeScript初体验

1.安装编译TS工具包 npm i -g typescript 2. 查看版本号 tsc -v 3.创建ts文件 说明&#xff1a;创建一个index.ts文件 4.TS编译为JS tsc index.ts 5.执行JS代码 node index.js 6.简化TS的步骤 6.1安装 npm i -g ts-node 6.2执行 ts-node index.ts...

基于 Alpine 环境源码构建 alibaba-tengine(阿里巴巴)的 Docker 镜像

About Alpine&#xff08;简介&#xff09; Alpine Linux 是一款极其轻量级的 Linux 发行版&#xff0c;基于 busybox&#xff0c;多被当做 Docker 镜像的底包&#xff08;基础镜像&#xff09;&#xff0c;在使用容器时或多或少都会接触到此系统&#xff0c;本篇文章我们以该镜…...

政府网站定期巡检:构建高效、安全与透明的数字政务

在数字时代&#xff0c;政府网站已不仅仅是一个信息发布窗口&#xff0c;更是政府与公众互动的桥梁、政务服务的主要渠道以及数字化治理的重要平台。因此&#xff0c;确保政府网站的高效运行、信息安全与透明公开就显得尤为重要。在此背景下&#xff0c;定期的网站巡检与巡查成…...

当神经网络遇上麻雀:转向架构架可靠性优化实战

基于CSSA -BR的转向架构架可靠性优化可靠性分析 静强度分析 稳健优化 仿真分析 问题定义&#xff1a; 研究的是包含区间变量和概率变量的混合结构可靠性分析问题。 提出方法&#xff1a; 提出了一种基于混沌麻雀搜索算法&#xff08;CSSA&#xff09;和贝叶斯正则化&#xf…...

24/7运行指南:OpenClaw+GLM-4-7-Flash树莓派部署与看门狗配置

24/7运行指南&#xff1a;OpenClawGLM-4-7-Flash树莓派部署与看门狗配置 1. 为什么选择树莓派作为OpenClaw的宿主设备&#xff1f; 去年冬天&#xff0c;当我第一次尝试让OpenClaw在我的主力开发机上24小时运行时&#xff0c;遭遇了严重的资源冲突问题。半夜运行的自动化任务…...

ICML 2026 开分!投稿群来了!还有IJCAI、CVPR 2026投稿群!

点击下方卡片&#xff0c;关注“CVer”公众号AI/CV重磅干货&#xff0c;第一时间送达点击进入—>【顶会/顶刊】投稿交流群添加微信&#xff1a;CVer2233&#xff0c;助手会拉你进群&#xff01;扫描下方二维码&#xff0c;加入CVer学术星球&#xff01;可获得最新顶会/顶刊上…...

lingbot-depth-pretrain-vitl-14惊艳效果:RGB输入→INFERNO伪彩深度图动态生成演示

lingbot-depth-pretrain-vitl-14惊艳效果&#xff1a;RGB输入→INFERNO伪彩深度图动态生成演示 1. 模型概述 LingBot-Depth (Pretrained ViT-L/14) 是一款基于 DINOv2 ViT-Large/14 编码器的深度估计与补全模型&#xff0c;拥有 321M 参数。该模型采用创新的 Masked Depth Mo…...

Flux.1-Dev深海幻境作品集:LSTM时序灵感驱动的系列艺术创作

Flux.1-Dev深海幻境作品集&#xff1a;LSTM时序灵感驱动的系列艺术创作 最近在尝试一些AI艺术创作的新玩法&#xff0c;发现了一个特别有意思的组合&#xff1a;用LSTM模型来“读”故事&#xff0c;再用Flux.1-Dev模型来“画”故事。听起来有点抽象&#xff1f;简单说&#xf…...

零基础玩转CTFShow Web1-7:手把手教你用Burp Suite和蚁剑拿flag

零基础玩转CTFShow Web1-7&#xff1a;从工具配置到实战渗透全指南 第一次接触CTF比赛时&#xff0c;看着其他选手在终端里敲出神秘代码就能拿到flag&#xff0c;总觉得这是黑客才能掌握的"黑魔法"。直到自己动手尝试才发现&#xff0c;只要掌握正确的工具和方法&…...

RetinaFace效果展示:高精度人脸检测与关键点定位案例

RetinaFace效果展示&#xff1a;高精度人脸检测与关键点定位案例 1. RetinaFace模型核心能力解析 RetinaFace作为当前最先进的人脸检测算法之一&#xff0c;在精度和效率方面都达到了业界领先水平。这个基于ResNet50构建的模型能够同时完成三项关键任务&#xff1a; 人脸检测…...

F3D开发环境搭建:从零开始编译和构建这个开源3D项目

F3D开发环境搭建&#xff1a;从零开始编译和构建这个开源3D项目 【免费下载链接】f3d Fast and minimalist 3D viewer. 项目地址: https://gitcode.com/GitHub_Trending/f3/f3d F3D是一款快速且极简的3D查看器&#xff0c;本指南将带你从零开始搭建其开发环境&#xff0…...

Systemd配置文件修改后不生效?试试这个命令比重启更高效

Systemd配置热更新实战&#xff1a;如何用daemon-reexec替代服务重启 在Linux系统管理中&#xff0c;systemd作为现代init系统的代表&#xff0c;其配置调整是管理员日常工作的核心部分。但许多工程师在修改/etc/systemd/system.conf这类全局配置后&#xff0c;往往陷入两难&am…...

LeagueAkari:基于LCU API的英雄联盟自动化工具集架构设计与实战应用

LeagueAkari&#xff1a;基于LCU API的英雄联盟自动化工具集架构设计与实战应用 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit L…...