预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段身份验证

Question

--It was a host error. Issue is solved--

I am using express API.
I have enabled all cors through npm cors package.
like this app.use(cors())

It's working fine when I run it on localhost. It was also working fine on the actual VPS (server), but suddenly today my API started giving me this error:-

Access to XMLHttpRequest at 'https://apilink' from origin 'https://frontendlink' has been blocked by CORS policy: Request header field authentication is not allowed by Access-Control-Allow-Headers in preflight response.

It's still working fine on my localhost, but now giving above error on actual website.

Below are some of my code block

Thanks in advance

My Axios Instance on frontend

import axios from "axios"

const axiosInstance = axios.create({
    headers: {
        Authentication: `Bearer ${
            somewhere_token ?? null
        }`,
    },
})

export default axiosInstance

SomeWhere in server.js before all routes

app.use(cors())

I have also tried below solutions in server.js file but none is fixing my issue

// solution 1
app.options('*', cors());
// solution 2
app.use(cors({
    origin: "*",
    allowedHeaders: "*",
}))

Answer 1

Probably you can fix it by adding * everywhere, but please consider using a reverse proxy to make your request to backend proxy-passed from frontend host as the best practice. I know it's an additional learning curve, but for modern APIs that's probably must have as it allows much more than just solving CORS issue.

Good guide here https://blogs.perficient.com/2021/02/10/nginx-proxy-for-cors/