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

这篇具有很好参考价值的文章主要介绍了SpringBoot解决前后端分离跨域问题:状态码403拒绝访问。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

SpringBoot解决前后端分离跨域问题:状态码403拒绝访问,# Spring Boot,异常排查,spring boot,java,HTTP状态码

SpringBoot解决前后端分离跨域问题:状态码403拒绝访问,# Spring Boot,异常排查,spring boot,java,HTTP状态码

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

异常描述

  • 在后端服务器启动后,前端页面也起了起来,然后点击这个【登录】按钮准备向后端发起POST请求时却没有任何的反应,便觉得很疑惑
    SpringBoot解决前后端分离跨域问题:状态码403拒绝访问,# Spring Boot,异常排查,spring boot,java,HTTP状态码
  • 于是来到后端的控制台观察是否有什么异常,但是也发现并没有任何的异常Exception显示出来,就觉得很奇怪(・∀・(・∀・(・∀・*)

SpringBoot解决前后端分离跨域问题:状态码403拒绝访问,# Spring Boot,异常排查,spring boot,java,HTTP状态码

抓包排查

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

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

SpringBoot解决前后端分离跨域问题:状态码403拒绝访问,# Spring Boot,异常排查,spring boot,java,HTTP状态码

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

SpringBoot解决前后端分离跨域问题:状态码403拒绝访问,# Spring Boot,异常排查,spring boot,java,HTTP状态码

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

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

SpringBoot解决前后端分离跨域问题:状态码403拒绝访问,# Spring Boot,异常排查,spring boot,java,HTTP状态码

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

SpringBoot解决前后端分离跨域问题:状态码403拒绝访问,# Spring Boot,异常排查,spring boot,java,HTTP状态码

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 {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.addAllowedOrigin(http"://localhost:5173");    // 允许谁跨域
        configuration.setAllowCredentials(true);                    // 传cookie
        configuration.addAllowedMethod("*");                        // 允许哪些方法跨域 post/get
        configuration.addAllowedHeader("*");                        // 允许哪些头信息

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration); // 拦截一切请求

        return new CorsFilter(source);
    }
}
  • 最主要的还是配置下面的这一句,将端口号为5173的口子放开,这样任何的HTTP请求就可以进来了
configuration.addAllowedOrigin("http://localhost:5173");    // 允许谁跨域
  • 此时我们再去看到就可以发现前后端可以进行交互了,只是因着其他的原因让以至于后端返回了一些错误的信息给到前端

SpringBoot解决前后端分离跨域问题:状态码403拒绝访问,# Spring Boot,异常排查,spring boot,java,HTTP状态码
SpringBoot解决前后端分离跨域问题:状态码403拒绝访问,# Spring Boot,异常排查,spring boot,java,HTTP状态码

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

SpringBoot解决前后端分离跨域问题:状态码403拒绝访问,# Spring Boot,异常排查,spring boot,java,HTTP状态码文章来源地址https://www.toymoban.com/news/detail-771756.html

到了这里,关于SpringBoot解决前后端分离跨域问题:状态码403拒绝访问的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决Spring Boot前后端分离开发模式中的跨域问题

    在实际开发中,经常会遇到前端Vue应用与后端Spring Boot API接口存在跨域访问的问题。本篇博客将分享解决Spring Boot前端Vue跨域问题的实战经验,帮助开发者快速解决该问题。 跨域问题是由于浏览器的同源策略引起的。同源策略限制了从一个源加载的文档或脚本如何与来自另一

    2024年02月10日
    浏览(91)
  • 前后端分离项目跨域问题No ‘Access-Control-Allow-Origin‘解决方案

    一.问题背景 前后端分离项目跨域问题,浏览器控制台报错: No \\\'Access-Control-Allow-Origin\\\' header is present on the requested resource. 请求方法为OPTIONS,状态值为302或403。 本文解决常见的CORS跨域问题,以及,集成CAS 5.3单点登录内嵌页面时,发送复杂请求产生的跨域问题。 二.解决方案

    2024年02月02日
    浏览(52)
  • SpringBoot&Vue&EmementUI前后端分离整合、统一封装axios、跨域配置

    🧑‍💻作者名称:DaenCode 🎤作者简介:CSDN实力新星,后端开发两年经验,曾担任甲方技术代表,业余独自创办智源恩创网络科技工作室。会点点Java相关技术栈、帆软报表、低代码平台快速开发。技术尚浅,闭关学习中······ 😎人生感悟:尝尽人生百味,方知世间冷暖。

    2024年02月09日
    浏览(39)
  • (九)axios前后端跨域数据交互--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建

    在任务六中我们讲过,前后端跨域数据交互,有两种方式可以解决跨域请求,任务六我们使用了CorsConfig类配置跨域。本次任务,我们使用一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中的axios,实现前后端跨域数据交互。通过本次任务,大家能够: (1)掌握axios的使用

    2024年02月15日
    浏览(34)
  • 解决Origin请求头导致的Nginx反向代理403跨域问题

    页面通过域名A【https://a.winfun.com】访问接口,域名A通过Nginx服务进行反向代理,代理到域名B【http://b.winfun.com】,然后进行业务逻辑执行。 时序图: nginx配置: 接口返回Http状态为403,出现跨域问题。 为了方便测试,我们直接将接口放到Postman中进行模拟测试,并带上相关请求

    2024年02月12日
    浏览(41)
  • springboot 出现 Cannot resolve MVC View ‘index‘ 问题解决办法,前后端不分离项目前端文件存放位置,已经如何访问

    简介:本文讲解,在springboot不分离的项目中,前端的文件存放的位置,和Cannot resolve MVC View ‘index‘ 这个报错怎么处理。 我们需要把 html 相关的页面放在 resource 的 templates 的下面,然后 js,css 相关的文件需要放在 static 下面 我现在想要访问这个 index.html ,需要注意的是 @Con

    2024年04月12日
    浏览(45)
  • 403错误是一种常见的HTTP状态码,表示服务器拒绝了请求

    403错误是一种常见的HTTP状态码,表示服务器拒绝了请求。出现403错误通常意味着客户端没有访问所请求资源的权限。以下是导致403错误的几个可能原因以及相关的编程示例: 权限配置错误:403错误可能是由于服务器权限配置错误导致的。在某些情况下,服务器可能需要用户

    2024年02月04日
    浏览(53)
  • nginx如何解决前后端跨域问题

    Nginx 可以通过以下两种方式来解决前后端跨域问题: 添加 CORS 头部 Nginx 可以通过添加 CORS 头部来解决跨域问题。CORS(Cross-Origin Resource Sharing)是一种机制,它允许 Web 应用程序从不同的域访问其资源。要在 Nginx 中添加 CORS 头部,可以在 Nginx 配置文件中的特定位置添加以下代

    2024年02月05日
    浏览(40)
  • 关于 若依框架(前后端隔离版本) 图片映射问题的解决方法 (解决跨域问题,配置代理路由)

    开发代理: 在 vue 项目内的 vue.config.js 配置文件内配置 devserver 配置,在 proxy 参数内配置两个代理路径,如 生产代理: 在 nginx 配置文件 nginx.conf 内配置 图片代理路由,类似 /proc-api/ 一样的路由 参考如下链接,去配置后端图片映射路径 1. addResourceHandler配置静态资源映射本地

    2024年02月13日
    浏览(42)
  • ruoyi若依前后端分离项目部署到服务器后,PUT DELETE请求403错误,GET POST请求正常

    后端打包方式war,部署到tomcat8, PUT DELETE请求报403错误,网上有三种说法 第一种是跨域请求问题 第二种是服务器没有放开了PUT DELETE请求,需要前端添加header ruoyi vue 自动生成代码PUT DELETE为http不安全方法,这个怎么解决安全问题 · Issue #I43AX6 · 若依/RuoYi-Vue - Gitee.com 用域名访问

    2024年01月17日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包