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?

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?

• javascript
• jquery
• ajax
• rest
• http

• 2 The server needs to set the header, as the server decides who's allowed to access and from where. So the answer to your first question is: Add the header to your server. This should make your second question obsolete. – Marc Dix Commented May 30, 2016 at 14:23
• 1 Access-Control-Allow-Origin is a http response header, returned by the server. See developer.mozilla/en-US/docs/Web/HTTP/Access_control_CORS for details. – Antoine Commented May 30, 2016 at 14:24

2 Answers 2

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.

somehow i redirected to this question to get the solution for my Flask application. Since the server has to send the response back to the header, the CORS has to set in the server side. In my case i was trying to send the request from

client http://127.0.0.1:8081/

to

server http://127.0.0.1:5051

So i set the cors policy to allow the origin in the client side

headers: {  "Access-Control-Allow-Origin:": "*"},

and for the server side, flask provides library to allow the cors

from flask_cors import CORS
app = Flask(__name__)

CORS(app)

it actually got resolved the issue