How to fix CORS error Response to preflight request doesn't pass access control check: It does not have HTTP ok status?

Question

JavaScript

I encountered a very intrusive CORS error when making a cross-server GET request from a JS script to my Apache server with a deployed Django project. The most interesting thing is that the POST request for registration works out without problems. I send a POST with user registration, then I send a POST with authorization to get the token, and then I send a GET with the token in the Header to get the data, and every time I catch an error at this stage. The error has the following text:

Access to fetch at ' https://server.domain/accounts/all-profiles ' from origin ' https://client.domain ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

For 3 days I have been surfing the Internet, trying various solutions to this problem, but I have not received a positive result. Therefore, I kindly ask for help in this matter. Postman requests work fine.

Added permissions to the Apache apache2.conf configuration file

<IfModule mod_headers.c>
    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header always set Access-Control-Allow-Headers 
    "append,delete,entries,foreach,get,has,keys,set,values,Authorization"
    </IfModule>

Added a redirect for the OPTIONS test request

RewriteEngine On                  
    RewriteCond %{REQUEST_METHOD} OPTIONS 
    RewriteRule ^(.*)$ /blank.html [QSA,L]

Another option I tried

RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]

Set up SSL for the server

Set up SSL for the client

Wrote a GET request via both XMLHttpRequest() and fetch()

Below is my JS request XMLHttpRequest()

const loginrequests = new XMLHttpRequest();
    const CheckJWT = 'https://server.domain/accounts/all-profiles'

    function ShowToken() {
        NewTok = localStorage.getItem("SavedToken");
        console.log(NewTok);
        loginrequests.open("GET", registerURL, true);
        loginrequests.setRequestHeader("Authorization", NewTok);
        loginrequests.send();

     }

Below is my JS Fetch() request

async function postData() {
    NewTok = localStorage.getItem("SavedToken");
    const CheckJWT = 'https://server.domain/accounts/all-profiles'

    const response = await fetch(CheckJWT, {
    method: 'GET', 
    headers: {
      'Authorization': NewTok,
      },
    });
    return await response.json();
    }

More below is the main thing from my Apache configuration file apache2.conf

DefaultRuntimeDir ${APACHE_RUN_DIR}

    PidFile ${APACHE_PID_FILE}

    Timeout 300

    KeepAlive On

    MaxKeepAliveRequests 100

    KeepAliveTimeout 5

    User ${APACHE_RUN_USER}
    Group ${APACHE_RUN_GROUP}
    
    HostnameLookups Off

    ErrorLog ${APACHE_LOG_DIR}/error.log

    LogLevel warn

    IncludeOptional mods-enabled/*.load
    IncludeOptional mods-enabled/*.conf

    Include ports.conf

    <Directory />
  Options FollowSymLinks
  AllowOverride None
  Require all denied
    </Directory>

    <Directory /usr/share>
  AllowOverride None
  Require all granted
    </Directory>

    <Directory /var/www/>
  Options Indexes FollowSymLinks
  AllowOverride None
  Require all granted
    </Directory>

    WSGIPassAuthorization On

    AccessFileName .htaccess

    <FilesMatch "^\.ht">
      Require all denied
    </FilesMatch>


    LogFormat "%v:%p %h %l %u %t \"%r\" %>s %O \"%{Referer}i\" \"%{User-Agent}i\"" vhost_combined
    LogFormat "%h %l %u %t \"%r\" %>s %O \"%{Referer}i\" \"%{User-Agent}i\"" combined
    LogFormat "%h %l %u %t \"%r\" %>s %O" common
    LogFormat "%{Referer}i -> %U" referer
    LogFormat "%{User-agent}i" agent

    IncludeOptional conf-enabled/*.conf

    IncludeOptional sites-enabled/*.conf

    <IfModule mod_headers.c>
    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header always set Access-Control-Allow-Headers 
    "append,delete,entries,foreach,get,has,keys,set,values,Authorization"
    </IfModule>

    RewriteEngine On                  
    RewriteCond %{REQUEST_METHOD} OPTIONS 
    RewriteRule ^(.*)$ /blank.html [QSA,L]

Please help, because I no longer have the strength to throw peas against the wall, trying options that do not help =.(

Answer 1

Open the developer console in your browser, switch to the Network tab, reproduce the error, and see what requests are leaving and what responses are being returned.
Judging by the error, the OPTIONS request does not return a 200 status.

Answer 2

My problem was that Django was not handling OPTIONS requests. The problem was solved using this module https://pypi.org/project/django-cors-headers/