跨域CORS政策拦截请求问题求助（含Express及Axios配置）

1. 删除前端无效的响应头设置 #

前端代码中添加的Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers属于后端响应需返回的头，前端请求时设置这些完全无效，还可能引发冲突，直接删除即可：

修改后的前端代码：

axios.defaults.withCredentials = true;
const baseURL = 'https://myweb.herokuapp.com/' + "auth"
const api = axios.create({
    baseURL: baseURL,
})
// 移除以下三行无效配置
// api.defaults.headers.common['Access-Control-Allow-Origin'] = 'http://localhost:3000';
// api.defaults.headers.common['Access-Control-Allow-Methods'] = 'GET,PUT,POST,DELETE,PATCH,OPTIONS';
// api.defaults.headers.common['Access-Control-Allow-Headers'] = 'Origin, Content-Type, X-Auth-Token, Authorization';

2. 对齐请求域名与后端origin配置 #

从错误信息可见，实际请求的地址是https://patrick-barbie-f64046e3bb4b.herokuapp.com/auth/login/，但你后端和前端配置的是https://myweb.herokuapp.com/，域名不匹配会导致CORS中间件无法匹配到你设置的origin列表，默认返回*作为Access-Control-Allow-Origin，触发错误。

解决方式：

• 确保前端请求的baseURL和后端实际部署域名完全一致；
• 若后端有多个部署域名，将所有允许的域名加入origin数组：

const cors = require('cors')
app.use(cors({
   origin: ["http://localhost:3000", "https://patrick-barbie-f64046e3bb4b.herokuapp.com"],
   credentials: true,
   optionSuccessStatus: 200
 }))

3. 排查后端CORS配置冲突 #

确认Express应用中没有在cors中间件之后设置其他自定义CORS头，这类代码会覆盖cors中间件的正确配置，必须删除：

// 此类代码需移除
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

4. 重启Heroku后端服务 #

Heroku部署后修改配置需重新部署或重启服务，确保新的CORS配置生效：

# 提交代码后重新部署
git add .
git commit -m "fix cors config"
git push heroku main

# 或直接重启服务
heroku restart

验证方法 #

打开浏览器开发者工具的Network标签，查看登录请求的Response Headers，确认：

• Access-Control-Allow-Origin的值为http://localhost:3000而非*
• 存在Access-Control-Allow-Credentials: true头

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