vue3delete请求报403forbidden,前后端解决方式

在做开发时,前期已经在Controller类加上@CrossOrigin(origins = "*"),发送get和post请求都没问题,但遇到delete请求时,又报出跨域问题

一.前端添加proxy代理服务器(未能解决)

在vue.config.js中使用devServer配置代理,在文件中添加

javascript 复制代码
devServer:{
    proxy:{
      "/api":{
        target:"http://localhost:9998",
        changeOrigin: true,
        pathRewrite:{"^/api": ""},
      }
    }
  }

然后在你的axios配置文件中将baseURL改成

javascript 复制代码
const API = axios.create({
	baseURL:'/api', 
	timeout: 2000                  
})

这是因为proxy中设置了target,则此时请求地址变为http://localhost:9998/api

但同时在proxy中添加了pathRewrite属性,它是一个正则表达式,匹配/api并替换为""(空字符串),所以实际请求地址依然为http://localhost:9998/接口名称
使用proxy代理服务器的目的是:
解决跨域问题,我们的前端项目和代理服务器有相同的端口,访问代理服务器不存在跨域问题,然后由代理服务器去访问target目标地址。

二.后端重写addCorsMappings跨域方法(成功)

我这里是在src文件夹下,新建了config文件夹,创建了MyConfiguration类实现了WebMvcConfigurer,具体如下:

java 复制代码
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@SuppressWarnings("deprecation")
@Configuration
public class MyConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("GET","POST","DELETE","PUT","OPTIONS") //允许的请求类型
                //允许携带头信息(该处为所有头信息,可根据自己的需求修改)
                .allowedHeaders("*")
                .allowedOrigins("*")
                .maxAge(3600);
    }
}

在后端重写addCorsMappings方法成功解决了delete的跨域问题

相关推荐
白露与泡影13 小时前
BAT 大厂 java高频面试题汇总:JVM+Spring+ 分布式 +tomcat+MyBatis
java·jvm·spring
Han.miracle13 小时前
数据结构——排序的学习(一)
java·数据结构·学习·算法·排序算法
摇滚侠13 小时前
Spring Boot 3零基础教程,WEB 开发 通过配置类代码方式修改静态资源配置 笔记32
java·spring boot·笔记
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ13 小时前
mapper.xml sql动态表查询配置
xml·java·sql
YuanlongWang13 小时前
C# 基础——多态的实现方式
java·c#
小咕聊编程14 小时前
【含文档+PPT+源码】基于spring boot的固定资产管理系统
java·spring boot·后端
roykingw14 小时前
【终极面试集锦】如何设计微服务熔断体系?
java·微服务·面试
我命由我1234514 小时前
Spring Cloud - Spring Cloud 微服务概述 (微服务的产生与特点、微服务的优缺点、微服务设计原则、微服务架构的核心组件)
java·运维·spring·spring cloud·微服务·架构·java-ee
それども14 小时前
忽略Lombok构建警告
java·开发语言·jvm
用户685453759776914 小时前
🎮 Java设计模式:从青铜到王者的代码修炼手册
java·后端