SpringBoot解决前后端分离跨域问题:状态码403拒绝访问

在这里插入图片描述

在这里插入图片描述

最近在写和同学一起做一个前后端分离的项目,今日开始对接口准备进行 登录注册 的时候发现前端在发起请求后,抓包发现后端返回了一个403的错误,解决了很久发现是【跨域问题】,第一次遇到,便作此记录✍

异常描述

  • 在后端服务器启动后,前端页面也起了起来,然后点击这个【登录】按钮准备向后端发起POST请求时却没有任何的反应,便觉得很疑惑
    在这里插入图片描述
  • 于是来到后端的控制台观察是否有什么异常,但是也发现并没有任何的异常Exception显示出来,就觉得很奇怪(・∀・(・∀・(・∀・*)

在这里插入图片描述

抓包排查

那么这个时候:提升自己的机会就又来了,我便准备去查看网页控制台并抓包进行观察

  • 再次打开这个网页发送请求的时候便发现,出现了两个 url,仔细观察发现端口号是不一样的,一个是我服务器启动的端口,为8080,另一个呢问了前端的同学说是它占用的这个端口号,为5173
  • 那么两个端口号都不一致前端发起请求后端无法接受到确实是可以解释得通的

在这里插入图片描述

  • 接着仔细查看这里的英文便可以看到前面的这个localhost:5173已经被 CORS策略 给拒绝了,说:不存在“Access Control Allow Origin”这样的标头,那读到这里我又可以进一步断定应该是【访问被拒绝】了,但是还无法做出完全的肯定

在这里插入图片描述

  • 此时我又去进行抓包确认,连着点了三次登录按钮,并通过【Fiddler】进行抓包便可以观察到很醒目的三个403,那么清楚HTTP协议的状态码的同学便可以清楚

【403状态码】:表示访问被拒绝,有的页面通常需要用户具有一定的权限才能访问(登陆后才能访问)

在这里插入图片描述

例如::查看码云的私有仓库, 如果不登陆, 就会出现403

在这里插入图片描述

Spring Boot解决跨域问题

那么此时,我们便可以在后端通过SpringBoot去写一个配置文件,以指定哪个端口是可以进行跨域访问的

  • 以下是相关的代码,只需要在config包(一般放配置文件)下添加一个这样的类即可,因为它是有关一些配置,所以要加上@Configuration注解
package com.example.demo.config;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 MyCorsConfig {@Beanpublic CorsFilter corsFilter() {CorsConfiguration configuration = new CorsConfiguration();configuration.addAllowedOrigin(http"://localhost:5173");    // 允许谁跨域configuration.setAllowCredentials(true);                    // 传cookieconfiguration.addAllowedMethod("*");                        // 允许哪些方法跨域 post/getconfiguration.addAllowedHeader("*");                        // 允许哪些头信息UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", configuration); // 拦截一切请求return new CorsFilter(source);}
}
  • 最主要的还是配置下面的这一句,将端口号为5173的口子放开,这样任何的HTTP请求就可以进来了
configuration.addAllowedOrigin("http://localhost:5173");    // 允许谁跨域
  • 此时我们再去看到就可以发现前后端可以进行交互了,只是因着其他的原因让以至于后端返回了一些错误的信息给到前端

在这里插入图片描述
在这里插入图片描述

那么以上就是我对于这里前后端分离项目所遇到的跨域问题的解决方案,希望对你有帮助🌹🌹🌹

在这里插入图片描述

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

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

相关文章

Java---网络编程

文章目录 1. 网络编程概述2. InetAddress3. 端口和协议4. Java网络API5. URL6. URLConnection类 1. 网络编程概述 1. 计算机网络:是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统、网络管理软…

2024年Mac专用投屏工具AirServer 7 .27 for Mac中文版

AirServer 7 .27 for Mac中文免费激活版是一款Mac专用投屏工具,能够通过本地网络将音频、照片、视频以及支持AirPlay功能的第三方App,从 iOS 设备无线传送到 Mac 电脑的屏幕上,把Mac变成一个AirPlay终端的实用工具。 目前最新的AirServer 7.2…

Matlab技巧[绘画逻辑分析仪产生的数据]

绘画逻辑分析仪产生的数据 逻分上抓到了ADC数字信号,一共是10Bit,12MHZ的波形: 这里用并口协议已经解析出数据: 导出csv表格数据(这个数据为补码,所以要做数据转换): 现在要把这个数据绘制成波形,用Python和表格直接绘制速度太慢了,转了一圈发现MATLAB很好用,操作方法如下:…

Bag-of-Words(BoW)

Bag-of-Words(BoW)模型是一种用于自然语言处理(NLP)的基本文本表示方法。它的核心思想是将文本数据转化为一个"词袋",忽略文本中词语的顺序和语法,只关注词汇的出现与否。BoW模型通常包括以下步骤…

逗号表达式与赋值表达式

逗号表达式和赋值表达式是C语言中常用的表达式类型。它们可以用于各种目的,包括计算和评估表达式、初始化变量、为函数调用提供参数以及将值分配给变量。 逗号表达式 逗号表达式允许在单个语句中计算和评估多个表达式。逗号分隔每个表达式,并且表达式从…

力扣134. 加油站

迭代 思路: 暴力模拟迭代;假设从第 idx 个加油站开始,使用一个变量对行驶的加油站个数计数,如果最后行驶的个数为 size,则是可行的;否则,行驶过的加油站都不可行;(加快更…

TypeScript 的基础语法

书接上上文:关于vue3的知识点 和 上文 :TypeScript的安装与报错 我们来接着看TypeScript 的基础语法 TypeScript 语法 1. 类型注解 类型注解是 变量后面约定类型的语法,用来约定类型,明确提示 // 约定变量 age 的类型为 numbe…

Ubuntu Linux 入门指南:面向初学者

目录 1. Ubuntu Linux 简介 Ubuntu 的由来 Ubuntu 与其他 Linux 发行版的比较 Debian: Fedora: openSUSE: Arch Linux: Linux Mint: 第二部分:安装 Ubuntu 1. 准备安装 系统需求 创建 Ubuntu 启…

Spring Cloud Gateway + Nacos 灰度发布

前言 本文将会使用 SpringCloud Gateway 网关组件配合 Nacos 实现灰度发布&#xff08;金丝雀发布&#xff09; 环境搭建 创建子模块服务提供者 provider&#xff0c;网关模块 gateway 父项目 pom.xml 配置 <?xml version"1.0" encoding"UTF-8"?…

数据库-期末考前复习-第3章-关系数据库标准语言SQL

1、掌握SQL语言实现数据查询、定义、操纵、控制的关键字。 数据查询&#xff1a;使用SELECT关键字进行数据查询操作。数据定义&#xff1a;使用CREATE和ALTER关键字进行数据库、表、视图、索引等的定义操作。数据操纵&#xff1a;使用INSERT、DELETE和UPDATE关键字进行数据的插…

2312d,d调用中文C++库

调用方: import core.stdcpp.string; //用C的串. import std.stdio;extern(C){bool bb(ref string a); } bool cc(ref string a);void main() {string c"bb";string d"";writeln(c,d);bool acc(c);writeln(c,d);bool bbb(d);writeln(a,b); }C这边,根据需要…

阿里云服务器开放端口Oracle 1521方法教程

阿里云服务器ECS端口是在安全组设置的&#xff0c;Oracle数据库1521端口号开放是在安全组中添加规则来实现的&#xff0c;阿里云服务器网aliyunfuwuqi.com来详细说下阿里云服务器开放Oracle 1521端口方法教程&#xff1a; 阿里云服务器开放Oracle 1521端口 在阿里云服务器ECS…

微信小程序自定义步骤条效果

微信小程序自定义一个步骤条组件&#xff0c;自定义文字在下面&#xff0c;已完成和未完成和当前进度都不一样的样式&#xff0c;可点击上一步和下一步切换流程状态&#xff0c;效果如下。 这是视频效果&#xff1a; 前端实现步骤条效果 下面我们一步步实现编码&#xff0c;自定…

华为鸿蒙运行Hello World

前言&#xff1a; 从11月中旬开始通过B站帝心接触鸿蒙&#xff0c;至今一个半月左右不到&#xff0c;从小白到入坑&#xff0c;再到看官网案例&#xff0c;分析案例&#xff0c;了解技术点&#xff0c;还需要理清思路&#xff0c;再写博客&#xff0c;在决定写 &#xff1c;Har…

配置Docker私有仓库

# 打开要修改的文件 vi /etc/docker/daemon.json # 添加内容&#xff1a; "insecure-registries":["http://自己服务器的ip地址:设置的端口号"] # 重加载 systemctl daemon-reload # 重启docker systemctl restart docker在自己设定的文件夹内使用DockerCo…

仓库管理系统

基于SSM框架的仓库管理系统

.net8 AOT编绎-跨平台调用C#类库的新方法-函数导出

VB.NET AOT无法编绎DLL,微软的无能&#xff0c;正是你的机会 .net8 AOT编绎-跨平台调用C#类库的新方法-函数导出 1&#xff0c;C#命令行创建工程&#xff1a;dotnet new classlib -o CSharpDllExport 2&#xff0c;编写一个静态方法&#xff0c;并且为它打上UnmanagedCallersO…

PWM应用篇

一.什么是PWM 用图话&#xff0c;如下图所示&#xff1a; PWM&#xff08;脉冲宽度调制&#xff09;&#xff1a;这是一种模拟控制方式&#xff0c;可以根据载荷的变化来调制晶体管基极或MOS管栅极的偏置&#xff0c;实现晶体管或MOS管导通时间的改变&#xff0c;从而改变开关稳…

【STM32】STM32学习笔记-TIM输入捕获(17)

00. 目录 文章目录 00. 目录01. 输入捕获简介02. 频率测量03. 输入捕获通道04. 主从触发模式05. 输入捕获基本结构06. PWMI基本结构07. 其它08. 附录 01. 输入捕获简介 IC&#xff08;Input Capture&#xff09;输入捕获 输入捕获模式下&#xff0c;当通道输入引脚出现指定电平…

SpringBoot 一个注解实现数据脱敏

什么是数据脱敏 数据脱敏是指对某些敏感信息&#xff0c;例如姓名、身份证号码、手机号、固定电话、银行卡号、邮箱等个人信息&#xff0c;通过脱敏算法进行数据变形&#xff0c;以保护敏感隐私数据。 数据脱敏通常涉及以下几种主要方法&#xff1a; 替换&#xff1a; 将原始…