Railway生产环境CORS配置后仍出现401及Cookie未发送问题

问题概述 #

已在服务器端配置CORS允许跨域请求，配置代码如下：

var whitelist = ['http://localhost:5000', 'http://localhost:3000', "https://newfrontened-production.up.railway.app", 'https://projecttrackingexpressbackend-production.up.railway.app']
var corsOptions = {
    origin: function (origin, callback) {
        if (whitelist.indexOf(origin) !== -1) {
            callback(null, true)
        } else {
            callback(new Error('Not allowed by CORS'))
        }
    },
    credentials: true,
    methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS']
}
 
app.use(cors(corsOptions));

同时创建了Axios实例：

export const axiosPrivate = axios.create({
    // // baseURL: BASE_URL,
    headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': 'true',
        'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
        'Access-Control-Allow-Headers': 'Set-Cookie'
    },
    withCredentials: true
});

调用接口时出现401错误，且Cookie未随请求发送：

export const getAllProjects = async () => {
    const projects = await axiosPrivate.get(`${process.env.REACT_APP_EXPRESS}/projects`, {
        withCredentials: true
    });
    return projects
}

排查与修复步骤 #

1. 移除Axios实例中多余的CORS请求头 #

Access-Control-Allow-*系列字段是服务器响应头，并非前端请求头。前端主动添加这些字段会干扰浏览器的CORS校验，甚至导致Cookie无法正常发送。修改Axios实例如下：

export const axiosPrivate = axios.create({
    // baseURL: BASE_URL,
    headers: {
        'Content-Type': 'application/json'
    },
    withCredentials: true
});

2. 检查Cookie的属性配置 #

跨域场景下，浏览器发送Cookie需要满足以下条件，必须在服务器设置Cookie时配置：

• SameSite=None：强制浏览器在跨域请求中发送Cookie，现代浏览器默认会阻止跨域Cookie发送，必须显式设置该属性
• Secure：当前端和后端均为HTTPS协议时必须设置，否则Cookie不会被传输
• Domain：确保Cookie的Domain设置与前后端域名匹配，若前后端为不同二级域名（如*.up.railway.app），可设置为.up.railway.app
• 可选但推荐添加HttpOnly属性，防止XSS攻击窃取Cookie

示例（Node.js/Express中设置Cookie）：

res.cookie('authToken', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'none',
    maxAge: 24 * 60 * 60 * 1000 // 1天有效期
});

3. 验证服务器端CORS白名单 #

检查白名单中的前端域名是否准确：

• 确认生产环境前端域名拼写无误（例如newfrontened是否应为newfrontend）
• 若本地测试时出现origin为null的情况（如file://协议），可在CORS配置中添加对null的支持，但生产环境不建议

4. 检查预检请求与响应头 #

打开浏览器开发者工具的Network面板，查看OPTIONS预检请求：

• 确认请求返回状态码为200
• 响应头中必须包含：
  • Access-Control-Allow-Origin：值为当前请求的前端域名（不能是*）
  • Access-Control-Allow-Credentials: true
  • Access-Control-Allow-Methods：包含请求使用的GET方法

5. 确认Cookie已存储且符合要求 #

在浏览器开发者工具的Application面板中，查看Cookies选项：

• 确认目标Cookie已存在
• 检查Cookie的SameSite、Secure、Domain属性是否符合上述要求

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