post请求,application/json发生跨域问题,但是application/x-www-form-urlencode不发生跨域问题

application/json发生跨域问题(发送的post请求)

1.背景:前后端分离,后端java,servlet;前端:vite,axios;后端在post方法中已经设置了允许跨域. 也就是response.setHeader(“Access-Control-Allow-Origin”, “*”)使用axios在前端发起post请求,发生CORS问题

2.这里不介绍跨域是什么,自己可以去网上找文章看

3.问题介绍:今天发现一个问题,我前端使用axios发送post请求,当我在axios加入headers: {‘Content-Type’: ‘application/json;charset=UTF-8’}这个请求头,浏览器显示有CORS,即跨域问题,经过一番调试,发现当contentType为application/json时,有跨域问题,而当contentType为application/x-www-form-urlencode不发生跨域问题,也就是能正常访问到接口.

4.寻找原因:1.浏览器将我的post请求视作了复杂请求,而对于复杂请求,浏览器会提前发起一个预检请求Options,Options请求服务器通过,浏览器才能发送post请求,原来如此!!!跨域请求不是post请求没有处理,而是Options没有处理!也就是说在java后端,我必须处理两个跨域请求,Options和post,我的代码如下

    protected void doOptions(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置跨域请求
        resp.setHeader("Access-Control-Allow-Origin", "*");
        resp.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        resp.setHeader("Access-Control-Allow-Headers", "Content-Type, X-Requested-With");
    }
    //在对应servlet中添加以上代码即可
    //我使用的是简单的servlet,如果是springboot,原理大致也如此,搜索预检请求关键字就能找到答案

5.前端代码

const register = () => {
  // 发起一个post请求
  let tempData= JSON.stringify({
      username: username.value,
      password: password.value,
      gender: gender.value,
      email: email.value
    });
  axios({
    method: 'post',
    url: 'http://localhost:8080/module_01/EnrollServlet',
    headers:{
      'Content-Type': 'application/json;charset=UTF-8'
    },
    data:tempData,
  }).then(res => {
    console.log(res);
  }).catch(err => {
    console.log(err);
  })
};

6.关于什么是简单请求,复杂请求,以及预检Options请求,网上有很详细的解释,这里不过多赘述

7.contentType为application/x-www-form-urlencode时,post请求为简单请求,因此不需要预检,这也是为什么此时不跨域 ( 前提:已经在post设置了response.setHeader(“Access-Control-Allow-Origin”, “*”) )

如有错误,望请指正