跨域遇到的一系列问题

前端使用的vue，后端使用的express。没有使用vue的proxyTable，就是作为后端解决一下这个跨域

解决代码

app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://h5.xesv5.com:8081')
    res.header('Access-Control-Allow-Credentials', true)
    res.header("Access-Control-Allow-Headers", "Content-Type,Accept,X-Requested-With,traceid,rpcid")
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
    res.header("Content-Type", "application/json;charset=utf-8")
    if (req.method == 'OPTIONS') {
        res.sendStatus(200)
    } else {
        if (req.path.indexOf('/getUserInfo') < 0 && (!req.session || !req.session.userInfo)) {
            res.send({
                stat: 1230,
                message: '登录失效'
            })
        } else {
            next()
        }
    }
})
复制代码

问题一：域名不一致的跨域提示

解决办法：设置Access-Control-Allow-Orign。我的后端一开始只设置了允许http://pylon.xueersi.com域名，但是没有带上端口号。

问题二： 后端没有设置Access-Control-Allow-Credentials

当前端设置withCredentials:true时，表示前端允许跨域的后端接口种cookie

解决办法：后端也需要在请求头设置Access-Control-Allow-Credentials:true

问题三：设置Credentials后，Access-Control-Allow-Origin需要指定域名，不可以设置*

问题四：前端在请求头上设置了参数，后端需要允许请求头设置该参数

解决办法：如果前端需要在请求头里加上token字段，后端这边需要Access-Control-Allow-Headers设置

res.header("Access-Control-Allow-Headers", "Content-Type,Accept,X-Requested-With,token")
复制代码

补充:axios请求头设置参数

config.headers.common['token'] = 123
复制代码