javascript - blockeras av CORS-policy: Förfrågningshuvudfältet content-type tillåts inte av Access-Control-Allow-Headers i förhandskontrollsvar

Jag försöker skapa ett enkelt frontend med Typescript och en backendserver med Flask och skicka förfrågningar via axios, som jag har använt. På något sätt får jag detta konstiga fel i webbläsarkonsolen:

Åtkomst till XMLHttpRequest på 'http://localhost:5000/api/test' från ursprung 'http://localhost:3000' har blockerats av CORS-policy: Begärans headerfält content-type är inte tillåtet av Access-Control-Allow-Headers i förhandsgranskningssvar. POST http://localhost:5000/api/test net::ERR_FAILED

Det står att min header har ett fält som är olagligt på grund av CORS-inställningar. Men saken är:

1. Jag har en CORS-inställning i backend Flask-servern:

i app/__init__.py:

from flask import Flask, render_template, jsonify
from flask_cors import CORS
from random import *
import requests


def create_app(Config):
    app = Flask(__name__)
    CORS(app, support_credentials=True, resources={r"/*": {"origins": "*"}})
    app.config.from_object(Config)
    app.static_folder = app.config["STATIC_FOLDER"]
    app.template_folder = app.config["TEMPLATE_FOLDER"]

    with app.app_context():
        from app.apis.routers import apis
        app.register_blueprint(apis)

    return app

i app/apis/routers.py:

@apis.after_request
def creds(response):
    response.headers['Access-Control-Allow-Credentials'] = 'true'
    return response


@apis.route('/api/test', methods=["POST"]) 
@cross_origin(supports_credentials=True)
def test():
    data = request.get_json()
    print(data)

    response = {
        "orderTime": "123-456-789",
        "eta": 123
    }
    return jsonify(response)

2. Jag använde initialt headern {withCredentials: true}. Efter att ha sett detta fel tog jag bort headern och förfrågan jag skickar har INGA headers ÖVERHUVUDTAGET, men den fortsätter ändå att säga åt mig att något i headers är fel:

i customer.tsx:

import React, {useState} from 'react';
import { useParams } from "react-router-dom";
import axios from 'axios';

import Button from '@mui/material/Button';

interface ParamTypes {
    username: string,
    order_id: string
}

interface headerTypes {
    'Content-Type': string,
    'Access-Control-Allow-Origin': string,
}

// interface Props {
// }

function CustomerContent() {
    // constructor(props: Props) {
    //     super(props);

        
    // }

    let {username, order_id} = useParams<ParamTypes>();
        console.log(username);
        console.log("hi");
    
    const [orderTime, setOrderTime] = useState(0);
    const [ETA, setETA] = useState(0);

    function buttonHandler() {
        let payload = {
            username: username,
            order_id: order_id,
        };

        axios.request<ParamTypes, string>({
            method: 'post',
            url: 'http://localhost:5000/api/test',
            data: payload,
        })
        .then(res => { 
            console.log(res)
        })
              
        setOrderTime(prev => prev + 1);
        setETA(prev => prev + 1);
    }

    return (
        <div>
            <h1>Hello {username}, this page is for your order with ID: {order_id}</h1>
            <p>order placed at: { orderTime } </p>
            <p>ETA: { ETA }</p>

            <Button variant="contained"
                onClick={() => buttonHandler()}>Click to Update Order Status</Button>

        </div>
    )

    
}


export default function customer() {
    return <CustomerContent />;
}

Vad är fel med min kod?

Svar #1

Som det visar sig, krävs det bara en enkel inställning i konfigurationen på serversidan enligt Hur man aktiverar CORS i Flask

Tack @mplungjan för din hjälp!