Every time I attempt to send a PUT request using AJAX, I encounter an error

Question

Every time I attempt to send a PUT request using AJAX, I encounter an error

After developing HTML and AJAX code to update a camera password within my network, I encountered an issue upon form submission.

"error" (net::ERR_EMPTY_RESPONSE)

Surprisingly, the PUT request functions perfectly when tested with POSTMAN, showing a status of OK(200). Interestingly, the code also executes flawlessly in Local mode using Internet Explorer. However, upon deployment to the server, it fails to work with Internet Explorer as well, displaying errors like "pending" and "access denied."

function myFunction() {
    var settings = {
        "async": true,
        "crossDomain": true,
        "url": "http://192.168.1.64/Security/users?auth=YWRtaW46MTEK",
        "method": "PUT",
        "headers": {
            "cache-control": "no-cache",
            "postman-token": "fda97359-6164-70d0-2896-8ca4804ac06c"
        },
        "data": "<UserList xmlns=\"http://www.hikvision.com/ver10/XMLSchema\" version=\"1.0\"><User xmlns=\"http://www.hikvision.com/ver10/XMLSchema\" version=\"1.0\"><id>1</id><userName>admin</userName><password>TT.123456</password></User></UserList>"
    }

    $.ajax(settings).done(function (response) {
        console.log(response);
    });
}

The error persists in Chrome. Please refer to the attached screenshot for more details.

Here is a screenshot from "POSTMAN":

jquery ajax xml cors put

Answer 1

Answer №1

To execute a cross-domain request on the client-side, it's advisable to opt for a POST request instead of utilizing a PUT method. According to the MDN documentation regarding HTTP access control (CORS):

Simple requests

Some types of requests don't prompt a CORS preflight. These are referred to as "simple requests" in this context, although the Fetch specification doesn't employ that term. A request that avoids triggering a CORS preflight—labelled as a "simple request"—must fulfill certain criteria outlined below:

The permissible methods include:

GET

HEAD

POST

¹

After running your code locally and switching the method to POST, I had to include the following headers on the endpoint:

access-control-allow-headers: cache-control,postman-token
access-control-allow-origin: *

Although the Access-Control-Allow-Origin header could be specifically set to a particular domain rather than using *. For instance:

Access-Control-Allow-Origin: https://intranetHost

In the figure below, the initial XHR request serves as the pre-flight request (with method being OPTIONS) while the subsequent one is the factual request (involving the method POST)

https://i.stack.imgur.com/WFZ9A.png

If a PUT request is still necessary, an alternative approach would involve sending a request to a server-side endpoint responsible for executing the PUT request (e.g. via cURL).

¹_{https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests}

Answer 2

To execute a cross-domain request on the client-side, it's advisable to opt for a POST request instead of utilizing a PUT method. According to the MDN documentation regarding HTTP access control (CORS):

Simple requests

Some types of requests don't prompt a CORS preflight. These are referred to as "simple requests" in this context, although the Fetch specification doesn't employ that term. A request that avoids triggering a CORS preflight—labelled as a "simple request"—must fulfill certain criteria outlined below:

The permissible methods include:

GET

HEAD

POST

¹

After running your code locally and switching the method to POST, I had to include the following headers on the endpoint:

access-control-allow-headers: cache-control,postman-token
access-control-allow-origin: *

Although the Access-Control-Allow-Origin header could be specifically set to a particular domain rather than using *. For instance:

Access-Control-Allow-Origin: https://intranetHost

In the figure below, the initial XHR request serves as the pre-flight request (with method being OPTIONS) while the subsequent one is the factual request (involving the method POST)

https://i.stack.imgur.com/WFZ9A.png

If a PUT request is still necessary, an alternative approach would involve sending a request to a server-side endpoint responsible for executing the PUT request (e.g. via cURL).

¹_{https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests}

Every time I attempt to send a PUT request using AJAX, I encounter an error

Answer №1

Simple requests

Similar questions

Wrap the json response in HTML elements

Load jQuery core asynchronously with a backup plan

What is the best way to monitor the quantity of server-side requests being made while utilizing jQuery Validate's remote feature?

What is the best way to determine the ideal scrollTop value?

Rearrange the sequence of numbers using JQuery when an HTML element is deleted

PHP encountered an issue when retrieving a value from a URL and passing it to a JavaScript variable

if a condition is not being properly assessed

The jQuery Modal Dialog functions properly on the initial page load, but fails to work on subsequent pages unless manually refreshed

JSON - The challenge of incorporating single quotes within double quotes

The challenge with linking within Layerslider

The module "jquery" in jspm, jQuery, TypeScript does not have a default export

Error encountered: index.html:17 - An InvalidStateError was thrown when attempting to execute the 'send' function on the XMLHttpRequest object. The object's state must be OPENED in order to send the Ajax request

Using jQuery to iterate through an array and reverse its order

Enhancing data with Django REST framework through AJAX requests

Is there a way to navigate to the "Error" view page following an AJAX request?

Change the websocket origin to localhost in a javascript setting

Real-time drop down options change depending on selection in another drop down menu

How to retrieve 'data' attributes from an object that was dynamically loaded?

What is the proper way to indicate "if the value is anything other than a, b, or c"?

Extracting Json data with Jquery