前端使用Axios发送请求时遭遇CORS跨域错误求助

问题核心 #

你用Axios发送跨域AJAX请求后，后端返回重定向响应。但AJAX请求的重定向不会触发浏览器页面跳转，反而会让Axios自动发起对重定向目标的GET请求，这个请求的跨域校验失败。另外，前端设置的Access-Control-Allow-Origin等头完全无效——这些属于响应头，只能由后端配置，前端请求时添加不会起作用。

解决方案 #

1. 修改后端接口，返回资源信息而非重定向 #

把后端的重定向逻辑改成返回新创建的营地数据或详情路径，让前端控制页面跳转：

router.post('/', validateCampground, catchAsync(async (req, res, next) => {
    // 删掉接口内重复的header设置，全局cors配置已覆盖
    const newCampground = new Campground(req.body.campground)
    await newCampground.save()
    // 返回JSON格式的成功信息，包含跳转路径
    res.status(201).json({
        success: true,
        redirectUrl: `/campgrounds/${newCampground._id}`
    })
}))

2. 修改前端Axios请求，手动处理页面跳转 #

调整前端提交逻辑，在请求成功后用前端路由完成跳转：

// 清理Axios实例里无效的响应头配置
const instance = axios.create({
    baseURL: '',
    withCredentials: false
})

const handleSubmit = (e) => {
    e.preventDefault()
    instance.post(
        `${BASE_URL}/campgrounds`,
        inputInfo,
        {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        .then(response => {
            // 用对应框架的路由跳转方法，示例为react-router的useNavigate
            navigate(response.data.redirectUrl)
        })
        .catch(err => {
            console.error('提交失败:', err)
        })
}

3. 清理冗余配置 #

• 彻底删除前端Axios实例中的Access-Control-Allow-Origin、Access-Control-Allow-Methods配置项。
• 删除后端接口内的res.header代码块，全局cors(corsOptions)已完成跨域配置，重复设置可能引发冲突。

问题根源解释 #

• 后端给AJAX请求返回重定向时，浏览器会自动向重定向目标发起新请求，但跨域上下文会被保留，导致CORS校验失败。
• CORS相关的响应头只能由服务端设置，前端请求时添加这些头不会被浏览器认可。

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