XMLHttp Request post not hitting the URL and not showing any error as well

Question

screenshot of network logI have written a XMLHttp request POST method in place of form post.

While debugging it's working fine and not showing any error, but not hitting the URL as well.

var http = new XMLHttpRequest();
var url = "https://localhost:8083/unique/test";
var params = finalJSON;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/json; charset=utf-8");
http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

Here finalJSON is my JSON which contains data like this:

{"ID": "1234", "AMOUNT": "10000", "TXNTYPE": "abc", "CURRENCY_CODE": "123"}

Not able to find the problem, please help what is missing why URL is not hitting?

I took the reference from this XMLHttps post request Reference

I also attached screenshot of network log , in it request is going but there is no response.

what does `not hitting the URL` mean? in the browser developer tools network page, do you see the request at all? (I suspect CORS issue by the way) — Jaromanda X, Jul 16 '19 at 05:53
Yes while debugging in network page request is going but not any response is showing. This url is actually a action in JAVA and while debugging it should hit the URL with parameter, its not working as expected. — The Khaleesi, Jul 16 '19 at 05:57
Chances are the problem is on the SERVER if it gets the request but makes no response — Jaromanda X, Jul 16 '19 at 06:08
No, I tested same on postman at that time URL is hitting , but not by this code. Unable to find out what is the problem? — The Khaleesi, Jul 16 '19 at 06:10
see, postman doesn't require CORS response headers to work - I suspected CORS - but you're clearly not seeing that in your browser developer console for some reason (which browser?) — Jaromanda X, Jul 16 '19 at 06:14
@JaromandaX thanx for the suggestion, but did u find any mistake in code ? which creates a problem? — The Khaleesi, Jul 16 '19 at 06:29
That's not valid JSON, the property names need to be in double quotes. — Barmar, Jul 16 '19 at 06:39
Use `JSON.stringify()` to create the JSON, it will create it correctly. — Barmar, Jul 16 '19 at 06:39
@Barmar, but my JSON is in correct format, previously I used JSON.Stringify() then also its not hitting the URL so I have choosen this way to pass JSON. — The Khaleesi, Jul 16 '19 at 06:53
Post the actual value of `finalJSON`, because what you posted is not valid JSON and could not have been produced by `JSON.stringify()`. — Barmar, Jul 16 '19 at 06:54
Check the webserver's access log to see if it's receiving the request. — Barmar, Jul 16 '19 at 06:55
@Barmar the JSON I am getting is like above but I am hiding actual parameters and its values for security purpose. — The Khaleesi, Jul 16 '19 at 07:25
I don't care about the actual parameters. But it should be `"ID":`, not `ID:`. — Barmar, Jul 16 '19 at 07:29
What you wrote looks like a JavaScript object literal, but JSON is more strict than JavaScript. — Barmar, Jul 16 '19 at 07:31
@Barmar, Yes u r right, It should be "ID" instead if ID: . I changed it but this doesn't solve my problem. — The Khaleesi, Jul 16 '19 at 07:46
Did you check the webserver's log to see if you're hitting it? If the browser says it's sending the request, but the server isn't receiving it, it could be a firewall issue. — Barmar, Jul 16 '19 at 07:49

score 0 · Answer 1 · answered Jul 16 '19 at 09:11

Try using the below:

var url = "https://localhost:8083/unique/test";
var params = finalJSON;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.send(params);

fiveelements · Accepted Answer · 2019-07-16T14:34:27.087

Are you running the above HTML snippet from the same server where the API is running? If not then you'll encounter CORS issue and here are some solutions:

Ways to avoid CORS in testing environment
In Server API allow cross-origin requests. In Java spring-boot application you can add @CrossOrigin(maxAge = 3600) to allow request from any origin

In case CORS is not the issue, check whether the request is hitting the server. Which server and framework you are using for backend API? Enable debug log to see what's happening.

Otherwise, can you please post the screenshot of browser console and network tab (the one showing the API call with details like request headers, etc.). Make sure these are not disabled.

Your code snippet is absolutely fine. I ran the same (with slight modification) in my system and it works fine. Note that, I have enabled cross-origin in my spring rest controller class.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ajax Interaction</title>
</head>

<body>
    <script type="text/javascript">
        var http = new XMLHttpRequest();
        var url = "http://localhost:8080/guide/channel";
        var params = '{"channelNumber": 110,"name": "Star Sprorts HD1","price": 20,"channelGroup": "Star"}';
        http.open("POST", url, true);
        http.setRequestHeader("Content-type", "application/json; charset=utf-8");
        http.onreadystatechange = function () {
            if (http.readyState == 4 && http.status == 200) {
                alert(http.status);
            }
        }
        http.send(params);

    </script>
</body>

</html>

Please refer following full code samples:

I have added the screenshot of my network log as u can see request is going but its status is pending only and have no response. — The Khaleesi, Jul 16 '19 at 09:52
@CrossOrigin(maxAge = 3600) worked for me, Thnx for the suggestion. — The Khaleesi, Jul 16 '19 at 14:23

XMLHttp Request post not hitting the URL and not showing any error as well

2 Answers2