Add CORS header to an http request using Ajax

Question

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?

Answer 1

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.

Answer 2

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