been blocked by CORS policy: No 'Access-Control-Allow-Origin'

Question

I am trying to send a GET request to my python flask server (running on 127.0.0.1:5000) from my javascript page (running on 127.0.0.1:80)

Python Flask server

import classifyGrade

from flask import Flask
from flask import request
from flask import Response
from flask import jsonify
import json

app = Flask(__name__)
@app.route('/')
def classify():

... function ...

    return response



if __name__ == '__main__':
    app.run(host='0.0.0.0',port=5000,debug=False)

Javascript

  function getClassification()
  {
    const modulesArray = [
      document.getElementById('module_1').value,
      document.getElementById('module_2').value,
      document.getElementById('module_3').value,
      document.getElementById('module_4').value,
      document.getElementById('module_5').value
    ]
    const marksArray = [
      document.getElementById('mark_1').value,
      document.getElementById('mark_2').value,
      document.getElementById('mark_3').value,
      document.getElementById('mark_4').value,
      document.getElementById('mark_5').value
    ]

    let module_1 = document.getElementById('module_1').value
    let module_2 = document.getElementById('module_2').value
    let module_3 = document.getElementById('module_3').value
    let module_4 = document.getElementById('module_4').value
    let module_5 = document.getElementById('module_5').value

    let mark_1 = document.getElementById('mark_1').value
    let mark_2 = document.getElementById('mark_2').value
    let mark_3 = document.getElementById('mark_3').value
    let mark_4 = document.getElementById('mark_4').value
    let mark_5 = document.getElementById('mark_5').value


    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var j = JSON.parse(this.response);
      }
    };
    /*
    xhttp.open("GET",classifyModulesURL+"?module_1=" + module_1 + "&mark_1=" + mark_1 + "&module_2=" + module_2 + "&mark_2=" + mark_2
    + "&module_3=" + module_3 + "&mark_3=" + mark_3 + "&module_4=" + module_4 + "&mark_4=" + mark_4
    + "&module_5=" + module_5 + "&mark_5=" + mark_5);


    console.log("Request Sent: "+"GET"+classifyModulesURL+"?module_1=" + module_1 + "&mark_1=" + mark_1 + "&module_2=" + module_2 + "&mark_2=" + mark_2
    + "&module_3=" + module_3 + "&mark_3=" + mark_3 + "&module_4=" + module_4 + "&mark_4=" + mark_4
    + "&module_5=" + module_5 + "&mark_5=" + mark_5);
    */

    xhttp.open("GET",classifyModulesURL+"?modules="+modulesArray+"&marks="+marksArray);
    xhttp.send();
    //POST Attempt
    //xhttp.open("POST",classifyModulesURL);
    //xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    //data = JSON.stringify({"modules": modulesArray, "marks": marksArray};
    //xhttp.send(data);
    return;
  }

I expect that my flask server returns the JSON response. It works when I do a request through postman:

But when I do it through the Google Chrome Browser I get this error:

Error in text:

Access to XMLHttpRequest at 'http://127.0.0.1:5000/?modules=CSC3021,CSC4302,CSC3299,CSC5678,CSC7623&marks=45,66,43,54,78' from origin 'http://127.0.0.1' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have tried:

Changing the port of the flask server
Importing flask_cors and trying to setup cors.

I do not want CORS on my flask server if possible. I just want to get the response from my GET command. Trying to keep things simple.

Is it something to do with my browser?

`I do not want CORS on my flask server if possible` - to allow client-side JS to make calls to your API you have little choice. You need to add CORS headers to the response from your server: https://stackoverflow.com/a/26395623/519413 — Rory McCrossan, Nov 09 '22 at 10:41
you can technically disable CORS in your browser, but it is highly unrecommended! You'd have to disable if for every site - globally, with a browser addon. You shouldn't do this, it's not gonna help you in the long run. If it's just to test a hobby project, sure. Just make sure to re-enable it when you're done testing. Most websites won't even work while your CORS is disabled. — c8999c 3f964f64, Nov 09 '22 at 15:29

score 0 · Answer 1 · answered Nov 09 '22 at 14:02

When reqesting data from different URL origins , we need to allow CORS while using any browser. But, POSTMAN is not a browser, so you don't need CORS.

def classify():
   ...
   # We can enable CORS, just by adding following header in Flask
   ...

   response.headers.add("Access-Control-Allow-Origin", "*")
   return response

been blocked by CORS policy: No 'Access-Control-Allow-Origin'

1 Answers1