为什么只有 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

打印出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

从您的 content-type 标头中删除 charset 并重新替换 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))
}