数据交互 跨域问题

Posted 2020-10-17 周小猴儿

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