I'm using nginx server to serve static React js files and waitress server for django rest framework with 0.0.0.0:8000 as address to serve api's. I'm using nginx as a reverse proxy for django. Even though i have modified django setting to allow all origins and modified nginx conf file to include cross origin headers and pre-flight headers. I'm still getting an error saying "Access to XMLHttpRequest at 'http://15.295.156.60:8000/core/profile/profile/' from origin 'http://15.295.156.60' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response."

I tried modifying the nginx conf file to include cross origin headers and pre-flight headers for the django reverse proxy. Modified the django settings to allow all origins. I want to handle this error "Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response." these are my django settings "

    CORS_ALLOW_ALL_ORIGINS = True

    CORS_ORIGIN_WHITELIST = [
    'http://192.168.56.1:80',
    'http://localhost:3000',
    'http://*',
    # Add any other origins that you want to allow here
]"

, This is my frontend request "

    const axiosInstance = axios.create({
    baseURL: baseURL,
    timeout: 5000,
    headers: {
        Authorization: localStorage.getItem('access_token')
            ? 'JWT ' + localStorage.getItem('access_token')
            : null,
        'Content-Type': 'application/json',
        accept: 'application/json',
    }, 
});"

, This is how i'm configuring my reverse proxy "

    location / {
            root   "C:/Users/Administrator/Desktop/build";
            try_files $uri $uri/ /index.html;
        }

        location /core/ { 
            # Handle preflight requests (OPTIONS)
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' * always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
                add_header 'Content-Length' 0;
                add_header 'Content-Type' 'text/plain charset=UTF-8';`your text`
                return 204;
            }
            add_header 'Access-Control-Allow-Origin' * always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            
            proxy_pass http://15.295.156.60:8000;
        }"
0

There are 0 best solutions below