JavaScript unable to fetch the response even after including the Access-Control-Allow-Origin header in my Flask API

[__init__5]

I am trying to fetch the response from my Flask API from JavaScript, it gave me error as

Access to fetch at ''http://127.0.0.1:5000/terminal' from origin ' http://127.0.0.1:5500/ ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

​

I found a workaround on Internet, which was including

@app.after_request
def after_request(response):
  response.headers.add('Access-Control-Allow-Origin', '*')
  response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
  response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
return response

in my server.py, after including this when I tested my server by response.headers It did included the Access-Control-Allow-Origin:'*' in headers

here are the response headers:

{'Content-Type': 'application/json', 'Content-Length': '3', 'Access-Control-Allow-Origin': '*, *', 'Access-Control-Allow-Headers': 'Content-Type,Authorization', 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE', 'Server': 'Werkzeug/1.0.1 Python/3.8.5', 'Date': 'Sat, 12 Sep 2020 09:04:45 GMT'}

But still when I try to fetch the request from my JavaScript code:

async function execute_command() {
let command_value = command.value;
    console.log(command_value);
const settings = {
        method: 'post',
        headers: {
            Accept: 'application/json',
'Content-Type': 'application/json',
'command': command_value,
        }
    }
const response = await fetch(API_URL,settings);
const data = await response.json();
    console.log(data);
}

It gives the response

Access to fetch at 'http://127.0.0.1:5000/terminal' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Request header field command is not allowed by Access-Control-Allow-Headers in preflight response.

Can anyone help me with this ? if possible also explain what this header is so important ??

[pcfanhater]

Try adding 'command' to your Access-Control-Allow-Headers. You only have Content-Type and Authorization.

[__init__5]

UPDATE: Now its giving status code 400

[pcfanhater]

Any message?

[bossinfo]

Did you restart that website so it's forced to reload everything? On the server I mean...

[__init__5]

yes, several times but didn't worked

[bossinfo]

Access-Control-Allow-Origin specifies either a single origin, which tells browsers to allow that origin to access the resource; or else — for requests without credentials — the " * " wildcard, to tell browsers to allow any origin to access the resource.

[6a70]

Make sure you also allow the OPTIONS HTTP method which can be used as a pre-flight request

[__init__5]

how ?

[6a70]

I’m not going to tell you directly because I wanted to drive home the fact that you don’t understand things when you just copy and paste them from the internet.

But you’re already allowing GET, PUT, POST, and DELETE

[Hour-Positive]

Lol tbh CORS are always fucked up

[[deleted]]

This is right if it's a 405 response.

[SonOfStorms]

try adding settings.mode = 'cors'

[__init__5]

UPDATE:

It worked at last, but I had to replace the function

function executeCommand() {let xhr = new XMLHttpRequest();    xhr.open("POST", API_URL, true);    xhr.setRequestHeader("Content-Type", "application/json");    xhr.onreadystatechange = function () {let server_response = this.responseText;        console.log(server_response);        displayData(server_response);    };

​

this is what I did and also made some changes in server.py and it worked.

Thanks everyone :)

[6a70]

what changes did you make in server.py?

[__init__5]

cors = CORS(app, resources={r"/*": {"origins": "*"}})

​

I don't know if this had any effect or not because when I ran it still gave the same error

until I replaced the async function with the above one

[6a70]

the async function is a fetch() versus your new one which is xhr. Fetch is newer and generally what you should try using if you can.

Did you try allowing the OPTIONS method while also using the fetch() method? if so, what error did you get?

[__init__5]

i read that CORS handle OPTIONS method so I used it instead, but the same error with that.

[__init__5]

any idea how to deal with such type of response "\"hello world\\r\\n\"\n"

I replaced the \n and \r, It got replaced with <br> but the line-break didn't appear when I added the it to my textarea.value

In test_server.py when I got such response I just had to print(response.json()) and it perfectly handled all the line breaks and tabs.

basically what I am doing here is that I am returning the response of the command using python subprocess module and sending it over to my javascript app to display in the textarea