Custom authentication header change the other headers

[rozmarbeka]

I'm implementing rest api authentication between VUE's vue-mc library and my Symfony rest api based on X-AUTH-TOKEN header. I could only manage the successfull authentication with Chrome's modHeaders plugin.

I fetch licences this way:

this.licences.fetch().then(() => {
    this.$message.success("Fetched!");
});

After I define getFetchHeaders in my LicenceList collection, the browser will send an OPTIONS preflight request and I got CORS error in console. The same happens if I pass options parameter with headers to fetch method call.

import {Collection} from "vue-mc";
import Licencefrom "../models/Licence";

export default class LicenceList extends Collection {
    model() {
        return Licence;
    }

    getFetchHeaders() {
        return {
            'X-AUTH-TOKEN': '29b084e5a2b290b5844e41748a327dd0aa0d87e1'
        }
    }

Console error: Access to XMLHttpRequest at 'http://api.manager.com/licences' from origin 'http://manager.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Request headers are the followings in this case:

Accept: application/json, text/plain, */*
Referer: http://manager.com/index.html
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36
X-AUTH-TOKEN: 29b084e5a2b290b5844e41748a327dd0aa0d87e1

If getFetchHeaders is empty or I not define it at all, the CORS policy error does not occur and the authentication is successfull if I enable the X-AUTH-TOKEN header in modHeaders Chrome plugin.

In the successful case the following headers set on the request:

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate
Accept-Language: hu-HU,hu;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control: no-cache
Connection: keep-alive
Host: api.manager.com
Origin: http://manager.com
Pragma: no-cache
Referer: http://manager.com/index.html
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36
X-AUTH-TOKEN: 29b084e5a2b290b5844e41748a327dd0aa0d87e1

I'd like to know why will browser send OPTIONS request instead of the normal POST if I set getFetchHeaders. Maybe it not related to this lib, but I greatly appriciate any help.

Thank you.

[rozmarbeka]

It was a web server related CORS issue. The final solution was a rewrite rule in the virtual host conf. The important rules are the followings to achieve successful authentication:

	Header always set Access-Control-Allow-Origin "http://manager.com"
        Header always set Access-Control-Allow-Methods "POST, PUT, GET, DELETE, OPTIONS"
	Header always set Access-Control-Allow-Headers "X-Auth-Token"

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

I close it.