js跨域及多种解决方法

同源策略:

它是浏览器 最核心也最基本的安全功能,——不同的客户端脚本在没有明确授权的情况下,不能读写对方资源

跨域: 只要协议,域名,端口有任何一个不同,的都被当做不同的域


解决跨域问题 :

   参考网址:https://www.cnblogs.com/yoissee/p/5901677.html

    方法一:

        JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问问题。其原理是根据 XmlHttpRequest 对象受到同源策略的影响,而 <script> 标签元素却不受同源策略影响,可以加载跨域服务器上的脚本,网页可以从其他来源动态产生 JSON 资料。用 JSONP 获取的不是 JSON 数据,而是可以直接运行的 JavaScript 语句。

jsonp

1. 只能使用 GET 方法发起请求,这是由于 script 标签自身的限制决定的。

2.不能很好的发现错误,并进行处理。与 Ajax 对比,由于不是通过 XmlHttpRequest 进行传输,所以不能注册 success、 error 等事件监听函数。

CORS:

        Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 JSONP 模式的现代版。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest,这种方式的错误处理比 JSONP 要来的好。另一方面,JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。

 CORS 的实现

app.post('/cors', function(req, res) {

 res.header("Access-Control-Allow-Origin", "*"); //设置请求来源不受限制

    res.header("Access-Control-Allow-Headers", "X-Requested-With");  

    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); //请求方式

    res.header("X-Powered-By", ' 3.2.1')

    res.header("Content-Type", "application/json;charset=utf-8");

    var data = {

        name: req.body.name + ' - server 3001 cors process',

        id: req.body.id + ' - server 3001 cors process'

    }

    console.log(data)

    res.send(data)

    res.end()

})

CORS 与 JSONP 的对比

CORS 除了 GET 方法外,也支持其它的 HTTP 请求方法如 POST、 PUT 等。

CORS 可以使用 XmlHttpRequest 进行传输,所以它的错误处理方式比 JSONP 好。

JSONP 可以在不支持 CORS 的老旧浏览器上运作。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容