JavaScript AJAX – Add CORS Header to HTTP Request

ajaxhttpjavascriptjqueryrest

I have developed a Restfull application and I'd like to add another web application to consume its services so I make this Ajax call :

 $.ajax({
            type: "Post",
            async: false,
            url: "ip_adress/Inviter/api/Account/Register",
            data: donne,
            headers: {  "Access-Control-Allow-Origin:": "*"},
            success: function (data) {
                console.log(data);
                var tab = [];
                tab["username"] = username;
                tab["password"] = pwd;
                var isLogged = Login.CheckCredential(tab, username);
                return isLogged;
            },
            error: function (xhr, status, error) {
                console.log(xhr);
                console.log(status);
                console.log(error);
            }

        });

I get this exception :

Object {readyState: 0, status: 0, statusText: "SyntaxError: Failed to
execute 'setRequestHeader' …-Origin:' is not a valid HTTP header
field name."} error DOMException: Failed to execute 'setRequestHeader'
on 'XMLHttpRequest': 'Access-Control-Allow-Origin:' is not a valid
HTTP header field name.

So I need to know :

How can I enable the CORS in this situation?
How can I fix my code?

Best Answer

You can't authorize yourself like that. It's a response header; details in the specification. The server you're sending the request to has to send that header back to let the browser know it's okay to allow your page to send an ajax request to that server. There's nothing you can do in your client-side code if the server you're trying to request from doesn't allow your origin.

Related Solutions

HTTP GET with Request Body – Best Practices

Roy Fielding's comment about including a body with a GET request.

Yes. In other words, any HTTP request message is allowed to contain a message body, and thus must parse messages with that in mind. Server semantics for GET, however, are restricted such that a body, if any, has no semantic meaning to the request. The requirements on parsing are separate from the requirements on method semantics.

So, yes, you can send a body with GET, and no, it is never useful to do so.

This is part of the layered design of HTTP/1.1 that will become clear again once the spec is partitioned (work in progress).

....Roy

Yes, you can send a request body with GET but it should not have any meaning. If you give it meaning by parsing it on the server and changing your response based on its contents, then you are ignoring this recommendation in the HTTP/1.1 spec, section 4.3:

...if the request method does not include defined semantics for an entity-body, then the message-body SHOULD be ignored when handling the request.

And the description of the GET method in the HTTP/1.1 spec, section 9.3:

The GET method means retrieve whatever information ([...]) is identified by the Request-URI.

which states that the request-body is not part of the identification of the resource in a GET request, only the request URI.

Update

The RFC2616 referenced as "HTTP/1.1 spec" is now obsolete. In 2014 it was replaced by RFCs 7230-7237. Quote "the message-body SHOULD be ignored when handling the request" has been deleted. It's now just "Request message framing is independent of method semantics, even if the method doesn't define any use for a message body" The 2nd quote "The GET method means retrieve whatever information ... is identified by the Request-URI" was deleted. - From a comment

From the HTTP 1.1 2014 Spec:

A payload within a GET request message has no defined semantics; sending a payload body on a GET request might cause some existing implementations to reject the request.

JavaScript/jQuery – How to Abort Ajax Requests

Most of the jQuery Ajax methods return an XMLHttpRequest (or the equivalent) object, so you can just use abort().

See the documentation:

abort Method (MSDN). Cancels the current HTTP request.
abort() (MDN). If the request has been sent already, this method will abort the request.

var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

//kill the request
xhr.abort()

UPDATE: As of jQuery 1.5 the returned object is a wrapper for the native XMLHttpRequest object called jqXHR. This object appears to expose all of the native properties and methods so the above example still works. See The jqXHR Object (jQuery API documentation).

UPDATE 2: As of jQuery 3, the ajax method now returns a promise with extra methods (like abort), so the above code still works, though the object being returned is not an xhr any more. See the 3.0 blog here.

UPDATE 3: xhr.abort() still works on jQuery 3.x. Don't assume the update 2 is correct. More info on jQuery Github repository.

Best Answer

Related Solutions

HTTP GET with Request Body – Best Practices

JavaScript/jQuery – How to Abort Ajax Requests

Related Question