跨域相关问题

Lycheeee 发布于2019-08-26 13:49 / 926人阅读

摘要：最近遇到了一个项目，第一次和其他组的后端合作，由于域名也是新申请的，所以在合作过程中遇到了很多跨域的问题。没有使用的，就是作为后端解决一下这个跨域解决代码登录失效问题一域名不一致的跨域提示现象解决办法设置。

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

GPU云服务器云服务器跨域问题 cdn跨域问题 javascript跨域问题 js跨域问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109597.html

跨域问题汇总

摘要：因为浏览器的同源策略，前端开发会遇到各种跨域问题。前言在总结各种跨域问题之前，我们先来了解一下浏览器的同源策略。所以只能解决一级域名相同二级域名不同的跨域问题。跨域问题的场景和解决方案多种多样，只要是做前端开发，总会遇到。而且面试时也是必问的问题。所以自己学习总结记录一下。因为浏览器的同源策略，前端开发会遇到各种跨域问题。本篇文章总结了遇到跨域问题的不同的场景以及对应的解决方案。 ...

MkkHou 2019-08-21 17:46 评论0 收藏0
HTML5 安全问题解析

摘要：本地安全问题在之前引入了本地这个东西，但是后面被废除了，他的安全点和后台数据库的关注点差不多，就是要防止在数据中混入查询指令。僵尸网络风险中解决了单线程问题，提出了机制，它为提供多线程支持，但是多线程带来了一个非常可怕的危险僵尸网络。 HTML5 安全问题解析标签： html html5 web安全本文参考： w3school:html5相关基础知识（w3school.com.c...

maybe_009 2019-08-01 14:51 评论0 收藏0
ajax跨域，这应该是最全的解决方案了

摘要：关于，强烈推荐阅读跨域资源共享详解阮一峰另外，这里也整理了一个实现原理图简化版如何判断是否是简单请求浏览器将请求分成两类简单请求和非简单请求。前言从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。个人见识有限，如有差错，请多多见谅，欢迎提出iss...

ytwman 2019-08-22 11:21 评论0 收藏0