CORS issue using Flask and Nextjs

Question

SOLUTION

See the code between *** *** for the changes!

back end - app.py:

from flask_cors import CORS

app = Flask(__name__)
***CORS(app, support_credentials=True)***

@app.route('/api/start', methods=['POST'])
***@cross_origin(supports_credentials=True)***
def dostuff_endpoint():
    global doingstuff_active
    
    if request.method == 'POST':
        if not doingstuff_active:
            doingstuff_active = True
            return 'Doingstuff activated.'
        else:
            return 'Doingstuff already active.'
    else:
        return 'Invalid request method.'

// Some code

if __name__ == '__main__':
    // Some code

    ***app.run(host='127.0.0.1', port=5000)***

front end - startButton.tsx:

'use client'

import { useEffect, useState } from 'react';
import axios from 'axios';

const StartButton = () => {
  
  const [data, setData] = useState('');

  const fetchData = async () => {
    try {
      const response = await axios.get('http://**127.0.0.1**:5000/api/dothat');
      const newEntry = response.data.new_entry;
      setData(newEntry || '');
    } catch (error) {
      console.log(error);
    }
  };

  const handleClick = async () => {
    try {
      await axios.post('http://***127.0.0.1***:5000/api/dothing');
      fetchData();
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <button onClick={handleClick}>Start</button>
      <p>{data}</p>
    </div>
  );
};

export default StartButton;

There are many CORS-related questions and solutions but after trying the solutions mentioned, I'm still having issues. I will be running this app locally so I don't see CORS as an issue. Can anyone point me in the right direction? TY!

I would like to stay away from running the request through a proxy.

I have tried solutions mentioned in: (1) CORS error when making network call in useEffect in Next.Js, (2) Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?

CORS error message:

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

back end - app.py:

from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/start', methods=['POST'])
def dostuff_endpoint():
    global doingstuff_active
    
    if request.method == 'POST':
        if not doingstuff_active:
            doingstuff_active = True
            return 'Doingstuff activated.'
        else:
            return 'Doingstuff already active.'
    else:
        return 'Invalid request method.'

// Some code

if __name__ == '__main__':
    // Some code

    app.run()

front end - startButton.tsx:

'use client'

import { useEffect, useState } from 'react';
import axios from 'axios';

const StartButton = () => {
  
  const [data, setData] = useState('');

  const fetchData = async () => {
    try {
      const response = await axios.get('http://localhost:5000/api/dothat');
      const newEntry = response.data.new_entry;
      setData(newEntry || '');
    } catch (error) {
      console.log(error);
    }
  };

  const handleClick = async () => {
    try {
      await axios.post('http://localhost:5000/api/dothing');
      fetchData();
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <button onClick={handleClick}>Start</button>
      <p>{data}</p>
    </div>
  );
};

export default StartButton;

CORS issue using Flask and Nextjs

0 Answers0