跨域相关问题 - HelloWorld开发者社区

最近遇到了一个项目，第一次和其他组的后端合作，由于域名也是新申请的，所以在合作过程中遇到了很多跨域的问题。现在自己做一下模拟总结。这里我的前端使用的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()
        }
    }
})

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

现象：

跨域相关问题

Response to preflight request doesn't pass access control check: No 'Access-Control-Origin' header is present on the requested resource.

解决办法：

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

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

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

现象：

跨域相关问题

The value of the 'Access-Control-Allow-Crentials' header in the response is '' which must be 'true' when the request's crentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute

解决办法：

后端也需要在请求头设置Access-Control-Allow-Credentials:true

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

跨域相关问题

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

现象：

跨域相关问题

Request header field token is not allowed by Access-Control-Allow-Headers in preflight response

解决办法：

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

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

补充:axios请求头设置参数

config.headers.common['token'] = 123

问题五：协议不同产生的问题

现象：

由于投放出去的链接是https的，但是之前我们测试使用的都是http协议的链接。后来改成https的时候，提示下面的错误：
跨域相关问题
Mixed Content: The page at 'https://xxx.com/#/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint. This request has been blocked: the content must be serverd over HTTPS

我的第一反应其实这也是一个跨域的问题，因为一个是http一个是https，后端只允许了http://xx，没有允许https协议的链接，但是报的错误是Mixed Content，这算是安全策略的报错，浏览器禁止了https协议访问http协议的资源和接口，大概是浏览器首先检测到的是这个安全策略的问题。
后来我把所有的接口协议修改为：'//xxx.com/xxx'后，继续报错，说明这个时候浏览器开始进一步检测跨域的问题：

跨域相关问题

Response to preflight request doesn't pass access control check: The 'Access-control-Allow-Origin' header has a value 'http://xx.com' that is not equal to the supplied origin.

原因很简单：就是跨域的Access-Control-Allow-Origin设置的是http协议的，运维老师加上https的就可以。