When Authorization header is passed to endpoint, I get CORS error

[ghost]

For example, I'm sending an Axios request with { headers: { Authorization: 'key' } }. I'm getting CORS error. It's not endpoint specific; it only occurs when I include the Authorization header.

What am I doing wrong then?

[lukeed]

If you're using cors package, check your allowedHeaders value and/or what's defined within the request's Access-Control-Request-Headers header value. CORS is permissive only to what's permissible. You have to manually configure what's allowed (unless/until you start throwing * values everywhere 😆)

docs: https://www.npmjs.com/package/cors

Hope that helps!

[ghost]

@lukeed That makes sense, but I'm still guessing it could be a Polka issue, because I even tried to specify the origin and allowed headers both as * in the cors package, and nothing works yet.

import cors from 'cors';

export default class CORS {
    static all() {
        return cors({ allowedHeaders: 'Content-Type,Authorization', credentials: true, origin: true });
    }
};

[lukeed]

Is that your entire config object? Can you show me how you're mounting it and what an example request looks like (curl is ideal)?

[ghost]

@lukeed Thanks for the quick reply. Here's the Bash command:

curl 'http://localhost:3010/blog' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'Referer: http://localhost:3000/blog' \
  -H 'Authorization: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEsImlhdCI6MTU5OTE2MzY0MCwiZXhwIjoxNTk5MjUwMDQwfQ.06iboDehVaziWeauOUDnYo_e-uc3zPpTZ19Kl790P-s' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36 OPR/70.0.3728.144' \
  -H 'Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryM71ZrwX2k4g3m4XZ' \
  --data-binary $'------WebKitFormBoundaryM71ZrwX2k4g3m4XZ\r\nContent-Disposition: form-data; name="title"\r\n\r\nWow\r\n------WebKitFormBoundaryM71ZrwX2k4g3m4XZ\r\nContent-Disposition: form-data; name="subtitle"\r\n\r\nWow\r\n------WebKitFormBoundaryM71ZrwX2k4g3m4XZ\r\nContent-Disposition: form-data; name="thumb"\r\n\r\nundefined\r\n------WebKitFormBoundaryM71ZrwX2k4g3m4XZ\r\nContent-Disposition: form-data; name="content"\r\n\r\nWow\r\n------WebKitFormBoundaryM71ZrwX2k4g3m4XZ--\r\n' \
  --compressed

I'm getting this log:

Access to XMLHttpRequest at 'http://localhost:3010/blog' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[lukeed]

I used your curl statement as is, only substituting 3010 for 3000.

Here's my server script:

const polka = require('polka');

polka()
    .use(
        require('cors')({
            origin: true,
            credentials: true
        })
    )
    .use((req, res) => {
        res.setHeader('Content-Type', 'application/json');

        res.end(
            JSON.stringify(req.headers, null, 2)
        );
    })
    .listen(3000)

Works via the curl and also via:

fetch('http://localhost:3000/blog');
fetch('http://localhost:3000/blog', { credentials: 'include' })

...from a website on another localhost port and from a real domain's console.

I'd advise revisiting out your axios settings. Either way, I know this isn't a Polka issue because Polka does nothing with incoming request headers. It's just a router on top of raw http interfaces and behaviors.