Vue axios Post请求 403 解决之道

前言:

刚开始请求的时候报 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')
        }
      }
    },

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

相关推荐

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

    2023-12-28 17:46:06       25 阅读
  2. 40Linux结业测试题,有解析,有答案

    2023-12-28 17:46:06       30 阅读
  3. 网站安全攻防:降本增效的解决

    2023-12-28 17:46:06       63 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-28 17:46:06       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-28 17:46:06       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-28 17:46:06       82 阅读
  4. Python语言-面向对象

    2023-12-28 17:46:06       91 阅读

热门阅读

  1. django调用矩阵分解推荐算法模型做推荐系统

    2023-12-28 17:46:06       53 阅读
  2. 计算机专业校招常见面试题目总结

    2023-12-28 17:46:06       63 阅读
  3. 在 docker 中安装 GLEE

    2023-12-28 17:46:06       62 阅读
  4. Thinkphp5钩子和触发钩子

    2023-12-28 17:46:06       55 阅读
  5. Spring Boot整合RocketMQ

    2023-12-28 17:46:06       61 阅读
  6. CentOS:Nginx 413 Request Entity Too Large

    2023-12-28 17:46:06       57 阅读
  7. PHP cookie和Sessions

    2023-12-28 17:46:06       60 阅读
  8. CSRF和SSRF原理、区别、防御方法

    2023-12-28 17:46:06       57 阅读
  9. el-table 纵向垂直表头

    2023-12-28 17:46:06       59 阅读
  10. Linux:Vim

    2023-12-28 17:46:06       56 阅读
  11. K8s 之动态编排

    2023-12-28 17:46:06       60 阅读
  12. RivaGAN 水印项目

    2023-12-28 17:46:06       55 阅读
  13. [spark] RDD, DataFrame和DataSet是什么?如何相互转化

    2023-12-28 17:46:06       57 阅读
  14. Leetcode7-库存管理(158)

    2023-12-28 17:46:06       54 阅读