数据交互 跨域问题

JavaScript的同源政策是互联网安全的基石,即不同源的网页之间的资源不能彼此调用彼此的资源的,判断是否同源的依据是:
协议相同,是http还是https。
域名相同,一级,二级等是否相同
端口相同,服务器默认端口是省略掉了的80端口,用其他端口则需要显式指定

而事实上为了提升网页性能,我们常常需要打破同源限制,比如单独假设图片服务器以突破浏览器同源资源请求数。

 

跨域请求最常用的有JSONP和CORS

JSONP

JSONP的说明见:http://www.cnblogs.com/zhouxiaohouer/p/7900602.html

 

CORS
现在浏览器(IE10+)基本上都支持了CORS,所以CORS的关键就是服务器是否定义了CORS的接口,所谓接口无非就是是否在响应头里设置了跨域许可Access-Control-Allow-Origin,
"'Access-Control-Allow-Origin':'*'"表示允许任何客户端访问。

 

CORS的具体流程以浏览器的简单请求说明

  在请求头里写入origin字段,标注同源信息,即协议+域名+端口,此请求到达服务器后,服务器比对origin同源信息是否在跨域许可Access-Control-Allow-Origin范围内,在的话就正常走请求流程,不在的话就返回一个错误,并且被XMLHttpRequest的onerror回调函数捕获。注意,这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200。

    router.post('/poststh',(req,res,next)=>{
        res.header('Access-Control-Allow-Origin', '*')
        console.log(req.body.filter)
        goodsModel.find((err,doc)=>{
            if (err) {
                res.json({
                    status:1,
                    msg:err,
                })
            }else{
                res.json({
                    status:0,
                    msg:req.body.filter
                })
            }
        })
    })

CORS跨域的简单请求和非简单请求可以参考阮老师的文章:http://www.ruanyifeng.com/blog/2016/04/cors.html

 

posted @ 2017-12-12 16:38  周小猴儿  阅读(400)  评论(0编辑  收藏  举报