CORS Not Working - No Access-Control-Allow-Origin' header-CodePudding

thank you for taking a look at my question. I have been building my flask app to help deliver some calculatoins in python to my React front end. I am attempting to bridge the gap between the two different servers but am having trouble with CORS (from the looks of it along with many others new to flask with react)

I have tried to change around many things like adding @cross_origin, origins: '', and headers.add("Access-Control-Allow-Origin", "") but no success. All I need from flask is the result of my functions. Has anyone else run into an issue similar or know a way I can fix this?

Flask Code:

app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*", "allow_headers": "*", "expose_headers": "*"}})`

@app.route('/')
@cross_origin()
def welcome():
    response = jsonify({'reply': 'Hello Webminers'})
    response.headers.add("Access-Control-Allow-Origin", "*")
    return response

React Code:

console.log(axios.get('http://127.0.0.1:5000'))

Console:

Access to XMLHttpRequest at 'http://127.0.0.1:5000/' from origin 'http://localhost:3000' has been 
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested 
resource.

Failed to load resource: net::ERR_FAILED

P.S not sure if this matters or not but I have also gotten the same response with 'localhost:5000 from origin localhost:3000'

Edit:

axios.get('http://127.0.0.1:5000', {headers: {"Access-Control-Allow-
Origin": "*"}}).then(response => {
        console.log(response.data);
    })

I added this in and got this new response from the console

Access to XMLHttpRequest at 'http://127.0.0.1:5000/' from origin 
'http://localhost:3000'has been blocked by CORS policy: Response to 
preflight request doesn't pass access control check: No 'Access-
Control-Allow-Origin' header

CodePudding user response：

FOUND IT! Bam fixed it with concurrent library's help

"start": "concurrently \"react-scripts start\" 
\"flask --app Backend/FlaskAPI.py run\"",

Is the config I used for anyone else who runs into the same issue

CodePudding user response：

You don't need to manually set the header, the CORS package will handle that for you. Also in frontend you don't need to specify CORS header when calling the API

Can you try the following way?

app = Flask(__name__)
CORS(app)

@app.route('/')
@cross_origin()
def welcome():
    response = jsonify({'reply': 'Hello Webminers'})
    return response

Then access the api like this:

axios.get('http://127.0.0.1:5000').then(response => {
        console.log(response.data);
    })

CodePudding user response：

I believe that I found the issue. I was looking around and trying a bunch of different things and even attempted to recreate the API in fastAPI to reach the same results.

However, I have just found this comment stating that they had an issue where React would be running but leaving the API behind thus causing errors for not being able to get the data from my API. https://stackoverflow.com/a/58786845/19683392

I am currently still looking for the solution and may open a new question but for now, I am getting this error:

TypeError: NetworkError when attempting to fetch resource.

More updates soon...