Vue axios Post请求 403 解决之道

news2024/11/15 8:28:04
前言:

刚开始请求的时候报 CORS 错误,通过前端项目配置后算是解决了,然后,又开始了新的报错 403 ERR_BAD_REQUEST。但是 GET 请求是正常的。

后端的 Controller 接口代码如下:

@PostMapping(value = "/login2")
    @ResponseBody
    public LoginReq login2(@RequestBody LoginReq req, HttpServletRequest servletRequest, HttpServletResponse response) {
        System.out.println("---- login2 ----- userName = " + req.getUserName());
//        // 设置js请求跨域解决
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        response.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");

        String userCode = servletRequest.getHeader("userCode");

        String accessToken = servletRequest.getParameter("accessToken");
        System.out.println("---- login2 --------------- accessToken = " + accessToken+" , userCode = " + userCode);
        String user = JSONObject.toJSONString(req);
        System.out.println("---- login2 ----- user = " + user);
        System.out.println("---- login2 -----  birthday = " + req.getBirthday());
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm");
        Date date = null;
        try {
            date = simpleDateFormat.parse(simpleDateFormat.format(req.getBirthday()));
        } catch (ParseException e) {
            e.printStackTrace();
        }
        System.out.println("date = " + simpleDateFormat.format(date));
        req.setBirthday(new Date());
        // 获取 cookie
        Cookie[] cookies = servletRequest.getCookies();
        if (cookies != null && cookies.length > 0) {
            for (Cookie cookie : cookies) {
                String name = cookie.getName();
                String value = cookie.getValue();
                System.out.println("cookie >> name = " + name + " , value = " + value);
            }
        }
        if (req.getUserName().isEmpty() || req.getPwd().isEmpty()) {
            throw new RuntimeException("userName or pwd is empty");
        }
        return req;
    }

前端的调用代码如下:

 axios({
                    method: 'POST',
                    url: 'login/demo_war_exploded/login2',
                    data: JSON.stringify(
                        {
                            'userName':"朱",
                            'pwd':"pass1234!",
                            'birthday':"2022-12-06"
                        }),
                    headers: {
                        'Content-Type' : 'application/json'
                    }
                }).then(response => {
                    console.log(response)
                }).catch(function (error) {
                        console.log(error)
                })
解决跨域问题的前端配置:
 proxy: {
     "/login" :{
        target: "http://localhost:8180/",
        changeOrigin: true,
        //ws: true,//websocket支持
        secure: false,
        pathRewrite: {
          "^/login": ""
        },
       
      }
 }

403 报错如下图:
在这里插入图片描述
网上搜索了一堆都不行,各种五花八门的答案,对我来说都是无效的。
直到后面问了一个前端的同事,他让我在配置跨域的地方加一行配置,结果就 OK 啦,

proxy: { //配置多个跨域
      "/login" :{
        target: "http://localhost:8180/",
        changeOrigin: true,
        //ws: true,//websocket支持
        secure: false,
        pathRewrite: {
          "^/login": ""
        },
        // 后面新增的配置
        onProxyReq(proxyReq) {
          proxyReq.removeHeader('origin')
        }
      }
    },

最后,成功的截图如下:
在这里插入图片描述

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

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

相关文章

中间件系列 - Redis入门到实战(高级篇-多级缓存)

前言 学习视频: 黑马程序员Redis入门到实战教程,深度透析redis底层原理redis分布式锁企业解决方案黑马点评实战项目 中间件系列 - Redis入门到实战 本内容仅用于个人学习笔记,如有侵扰,联系删除 学习目标 JVM进程缓存Lua语法入…

Pytorch从零开始实战14

Pytorch从零开始实战——DenseNet SENet算法实战 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——DenseNet SENet算法实战环境准备数据集模型选择开始训练可视化总结 环境准备 本文基于Jupyter notebook,使用Python3.8&#x…

排列组合算法(升级版)

前言 在上一期博客中我们分享了一般的排列组合算法(没看的话点这里哦~),但是缺点很明显,没法进行取模运算,而且计算的范围十分有限,而今天分享的排列组合升级版算法能够轻松解决这些问题,话不多…

Bean 生命周期 和 SpringMVC 执行过程

这里简单记录下 Bean 生命周期的过程,方便自己日后面试用。源码部分还没看懂,这里先贴上结论 源码 结论

PAT 乙级 1028 人口普查

解题思路:此题我想到俩种方法,一种是排序方法,一种是不排序的方法,首先都是看是否是有效年龄,然后一种是排序,另一种是维护最大值和最小值的变量,一定要注意如果有效数字是0那就只输出0就可以了…

【PostgreSQL内核学习(二十)—— 数据库中的遗传算法】

数据库中的遗传算法 概述个体的编码方式及种群初始化geqo 函数 适应值geqo_eval 函数gimme_tree 函数 父体选择策略geqo_selection 函数 杂交算子边重组杂交 ERX ( edge recombination crossover)gimme_edge_table 函数gimme_tour 函数 变异算子geqo_mutation 函数 声明&#x…

在Ubuntu20.04配置PX4环境

目录 1.下载PX4源码2.安装PX4所有工具链3.编译PX4工程1.下载PX4源码 打开Ubuntu,Ctrl+Alt+T打开终端输入下面代码: git clone https://github.com/PX4/PX4-Autopilot.git --recursive出现上图中出现“Command ‘git’ not found, but can be installed with”,使用以下代码…

企业私有云容器化架构运维实战

企业私有云容器化架构运维实战 了解 什么是虚拟化: 虚拟化(Virtualization)技术最早出现在 20 世纪 60 年代的 IBM 大型机系统,在70年代的 System 370 系列中逐渐流行起来,这些机器通过一种叫虚拟机监控器(Virtual M…

【线性代数】通过矩阵乘法得到的线性方程组和原来的线性方程组同解吗?

一、通过矩阵乘法得到的线性方程组和原来的线性方程组同解吗? 如果你进行的矩阵乘法涉及一个线性方程组 Ax b,并且你乘以一个可逆矩阵 M,且产生新的方程组 M(Ax) Mb,那么这两个系统是等价的;它们具有相同的解集。这…

Selenium自动化教程02:浏览器options配置及常用的操作方法

1.配置Chrome浏览器的选项 # Author : 小红牛 # 微信公众号:WdPython options webdriver.ChromeOptions() # 创建配置对象 options.add_argument(langzh_CN.UTF-8) # 设置中文 options.add_argument(--headless) # 无头参数,浏览器隐藏在后台运行 options.add_…

Win10 华硕笔记本只有飞行模式 WIFI 消失(仅供参考)

一、问题描述 下班,将电脑设置为休眠模式,回家,然后就出现:只有飞行模式,WIFI 消失 虽然有线可以用,但是不爽啊! 在“网络和Internet设置中” ,只有“飞行模式”的开关 &#xff0c…

java球队信息管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web球队信息管理系统是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5…

基于MATLAB的泊松分布,正态分布与伽玛分布(附完整代码与例题)

目录 一. 泊松分布 1.1 理论部分 1.2 MATLAB函数模型 1.3 例题 二. 正态分布 2.1 理论部分 2.2 MATLAB函数模型 2.3 例题 三. 伽玛分布 3.1 理论部分 3.2 MATLAB函数模型 3.3 例题 一. 泊松分布 1.1 理论部分 Poisson分布是离散的,其x值只能取自然数。…

uniapp Vue3 面包屑导航 带动态样式

上干货 <template><view class"bei"><view class"container"><view class"indicator"></view><!-- 遍历路由列表 --><view v-for"(item, index) in routes" :key"index" :class&quo…

卷积神经网络 反向传播

误差的计算 softmax 经过softmax处理后所有输出节点概率和为1 损失&#xff08;激活函数&#xff09; 多分类问题&#xff1a;输出只可能归于某一个类别&#xff0c;不可能同时归于多个类别。 误差的反向传播 求w的误差梯度 权值的更新 首先是更新输出层和隐藏层之间的权重…

RustDesk连接客户端提示key不匹配 Key Mismatch无法连接(已解决)

环境: RustDesk1.1.9 服务端docker部署 问题描述: RustDesk连接客户端提示key不匹配 Key Mismatch无法连接 解决方案: 1.docker部署RustDesk服务检查配置 networks:rustdesk-net:external: falsevolumes:hbbr:hbbs:services:hbbs:container_name: rustdesk-hbbsport…

webstrom 快速创建typescript 语法检测的Vue3项目

webstrom 快速创建typescript 语法检测的Vue3项目 若您想为您的Vue 3项目添加TypeScript支持&#xff0c;您需要进行以下步骤&#xff1a; 安装 typescript 和 vitejs/plugin-vue 作为开发依赖项&#xff1a; npm install --save-dev typescript vitejs/plugin-vue创建一个…

Cucumber-JVM的示例和运行解析

Cucumber-JVM 是一个支持 Behavior-Driven Development (BDD) 的 Java 框架。在 BDD 中&#xff0c;可以编写可读的描述来表达软件功能的行为&#xff0c;而这些描述也可以作为自动化测试。 Cucumber-JVM 的最小化环境 Cucumber-JVM是BDD的框架&#xff0c; 提供了GWT语法的相…

andriod安卓水果商城系统课设

​ 一、目的及任务要求 随着当今社会经济的快速发展和网络的迅速普及&#xff0c;手机基本成为了每个人都随身携带的电子产品。传统的购物方式已经满足不了现代人日益追求便利及高效率的购物心理&#xff0c;而通过移动手机上的在线购物系统&#xff0c;可以便捷地甚至足不出…

Vue 自定义ip地址输入组件

实现效果&#xff1a; 组件代码 <template><div class"ip-input flex flex-space-between flex-center-cz"><input type"text" v-model"value1" maxlength"3" ref"ip1" :placeholder"placeholder"…