Fix CORSError: Access to XMLHttpRequest at 'http://localhost:5000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy in Flask

This error occurs when a browser blocks a cross-origin request because the Flask server does not include the required CORS headers. Fix it by installing and configuring Flask-CORS with the correct allowed origins, or by manually adding Access-Control-Allow-Origin headers to your responses using an after_request handler.

Reading the Stack Trace

Here's what each line means:

• No 'Access-Control-Allow-Origin' header is present on the requested resource.: The browser's preflight check found no CORS headers in the response, so it blocked the frontend request.
• "OPTIONS /api/data HTTP/1.1" 405 -: The browser sent a preflight OPTIONS request but Flask returned 405 Method Not Allowed because no OPTIONS handler is registered.
• File "/app/app/routes.py", line 10, in get_data: The actual route handler works fine — the issue is the missing CORS headers, not the application logic.

Common Causes

from flask import Flask, jsonify

app = Flask(__name__)
# No CORS configuration

@app.route('/api/data')
def get_data():
    return jsonify({'items': []})

from flask_cors import CORS
CORS(app, origins=['http://example.com'])  # frontend is on localhost:3000

CORS(app, origins='*')  # wildcard does not work with credentials
# Frontend: fetch(url, { credentials: 'include' })

The Fix

Install flask-cors and initialize CORS with the specific frontend origin. Setting supports_credentials=True allows cookies and auth headers. Avoid using origins='*' in production as it disables credential support and weakens security.

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data')
def get_data():
    return jsonify({'items': []})

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=['http://localhost:3000'], supports_credentials=True)

@app.route('/api/data')
def get_data():
    return jsonify({'items': []})

Testing the Fix

import pytest
from app import create_app

@pytest.fixture
def client():
    app = create_app()
    app.config['TESTING'] = True
    return app.test_client()

def test_cors_headers_present(client):
    response = client.get('/api/data')
    assert 'Access-Control-Allow-Origin' in response.headers

def test_preflight_options_returns_200(client):
    response = client.options('/api/data', headers={
        'Origin': 'http://localhost:3000',
        'Access-Control-Request-Method': 'GET'
    })
    assert response.status_code == 200

def test_data_endpoint_returns_json(client):
    response = client.get('/api/data')
    assert response.status_code == 200
    assert response.content_type == 'application/json'

Run your tests:

pytest tests/ -v

Pushing Through CI/CD

git checkout -b fix/flask-cors-headers,git add app/__init__.py requirements.txt,git commit -m "fix: add Flask-CORS to allow cross-origin requests",git push origin fix/flask-cors-headers

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-python@v5
        with:
          python-version: '3.12'
          cache: 'pip'
      - run: pip install -r requirements.txt
      - run: pytest tests/ -v --tb=short
      - run: flake8 app/

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

pip install bugstack

import bugstack

bugstack.init(api_key=os.environ["BUGSTACK_API_KEY"])

Deploying the Fix (Manual Path)

1. Run pytest locally to confirm CORS headers are present on API responses.
2. Open a pull request with the Flask-CORS configuration.
3. Wait for CI checks to pass on the PR.
4. Have a teammate review and approve the PR.
5. Merge to main and verify the frontend can reach the API in staging.

Frequently Asked Questions