为什么只有GET请求才能在前端工作。 POST，PUT和Delete无效

Question

我有一个Java servlet CRUD应用程序。使用邮递员时，GET，POST，PUT和DELETE可以工作。但是，当我使用前端javascript代码时，只有GET请求才能工作。到达Servlet后端的POST，PUT和DELETE方法，但是到达后端时似乎没有参数附加到请求。

下面是我的GET JS代码。

function getTimePeriods(){
    clearElements()
    const url = 'http://localhost:8080/TimeTrackerWServlets/TimePeriodController/'

    fetch(url)
        .then(response => response.json())
        .then(response => showTimePeriods(response))     
}  

下面是POST JS代码。

function post(){
    console.log("post file reached")
    const url = 'http://localhost:8080/TimeTrackerWServlets/TimePeriodController/'
    const Data = {
        timePeriodId: "999",
        activityType: "ANIME"
    };

    const otherPram = {
        headers: {
            "content-type" : "application/json; charset=UTF - 8"
        },
        body : Data,   //JSON.stringify(Data)
        method: "POST",
        // mode: "no-cors",
    };

    fetch(url, otherPram)
    .then(data=>{return data.json})
    .then(res=>console.log(res))
    .catch(error=>console.log(error))
}

我可以console.log将要附加到请求的对象罚款。

下面是我的servlet doPost方法的缩写。

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("doPost reached POST POST POST POST POST POST POST POST ");
        setAccessControlHeaders(response);

        System.out.println("startTime: " + request.getParameter("timePeriodId"));
        System.out.println("startTime: " + request.getParameter("activityType"));
    }

两者

System.out.println("startTime: " + request.getParameter("timePeriodId")); ---> null
System.out.println("startTime: " + request.getParameter("activityType")); ---> null

打印为空。

所以我如何将数据附加到前端的请求。您是我唯一的希望Obi-Wan Kenobi。

Answer 1

避免在数据对象上使用JSON.stringify可能是问题，并且在“ Content-type”标头上传递错误的参数，

编辑：

尝试这些设置：

function post(){
    console.log("post file reached")
    const url = 'http://localhost:8080/TimeTrackerWServlets/TimePeriodController/'

    const otherPram = {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept':'application/json; charset=utf-8'
        },
        body : "timePeriodId=999&activityType=ANIME",
        method: "POST",
    };

    fetch(url, otherPram)
    .then(data=>{return data.json})
    .then(res=>console.log(res))
    .catch(error=>console.log(error))
}

Answer 2

从charset标头中删除content-type并重新替换JSON字符串化修复了它。

function post(){
    console.log("post file reached")
    const url = 'http://localhost:8080/api/test123'
    const Data = {
        timePeriodId: "999",
        activityType: "ANIME"
    };
    const otherPram = {
        headers: {
            "content-type" : "application/json"
        },
        body : JSON.stringify(Data),
        method: "POST",
        // mode: "no-cors",
    };
    fetch(url, otherPram)
        .then(data=>{return data.json})
        .then(res=>console.log(res))
        .catch(error=>console.log(error))
}