当我添加自定义标头和授权标头时，Axios 也会出现 CORS 错误

Question

我在 Next.js 12 中开始开发模式。前端在 localhost:3000 上启动，后端在另一个端口上启动，并使用 docker、nginx 和 php。一切正常，但是当我没有在请求中设置标头时。当我添加自定义标头或授权标头时 - 它因 CORS 策略而崩溃。

我添加了所有 CORS 策略并带有符号 *。我已经被这个问题困扰三天了。

重现：

const response = axios.get('https://api.publicapis.org/entries', {
                    headers: {
                        'X-Custom-Header': 'foobar'
                    },
                    params: data,
                }).then(res => {
                    console.log(res);
                })

截图：

https://disk.yandex.ru/i/YmPDH6pEdfem6A

Answer 1

您在浏览器中收到错误的原因是 CORS 是一种“限制浏览器”的方法。服务器可以随心所欲地响应，不受限制，除非经过编程专门查看 Origin 标头。 为了响应飞行前尝试使用这些标头：

Access-Control-Allow-Origin: https://your.domain
• （不要使用 *，这不适用于凭据）
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization
• （或您添加的任何其他自定义标头）
Access-Control-Allow-Methods: GET, POST
• （或您想使用的任何方法）