React前端调用Next.ts后端遭CORS策略拦截问题求助

报错信息：

localhost:8080/api/ 来自源 http://localhost:3000 的请求被CORS策略阻止：对预检请求的响应未通过访问控制检查：预检请求不允许重定向。

问题1：Next.js路由配置路径错误 #

你的next.config.ts里的source写的是本地文件路径/src/app/api，但Next.js的API路由对外暴露的是/api/开头的路径，必须修改路由匹配规则：

const nextConfig = {
    async headers() {
        return [
            {
                // 匹配所有/api下的子路由
                source: "/api/:path*",
                headers: [
                    { key: "Access-Control-Allow-Origin", value: "http://localhost:3000" },
                    { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT,OPTIONS" },
                    { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
                    {key: "Access-Control-Allow-Credentials", value: "true"},
                ]
            }
        ]
    }
}

export default nextConfig;

注意要加export default nextConfig，否则配置不会生效，改完重启Next.js服务。

问题2：Axios手动添加了预检请求头 #

浏览器会自动在OPTIONS预检请求里添加Origin和Access-Control-Request-Method，手动在POST请求里加这些头会导致请求异常，直接删掉多余配置：

const api = axios.create({
    baseURL: "http://localhost:8080/api/",
    withCredentials: true,
});

const obj = {
    userEmail: userEmail,
    validationCode: "TES-TER"
}

api.post("", obj)
.then((response) => {
    console.log(response.status);
})
.catch(err => {
    console.error(err); // 加个错误捕获方便排查问题
});

问题3：middleware.ts可能干扰预检请求 #

如果app目录下的middleware.ts有错误的路径匹配或返回了重定向响应，会干扰预检请求。可以先注释middleware里的代码，测试是否解决问题，再逐步排查具体规则。

做完以上调整后，重新启动两个服务，请求应该就能正常跨域访问了。

内容的提问来源于stack exchange，提问作者Travis Sherman