js同源策略、跨域、jsonp基础知识问答

一、问答

（一）、什么是同源策略?

同源策略简单的讲就是不同源（只要协议、域名、端口其中的一个不同就算作不同源）的网站之间下面三大类行为将受到限制：

（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。

（二）、什么是跨域？跨域有几种实现形式?

javascript出于安全考虑，不允许不同源间的网站进行文本或脚本间的资源交互，而采用某些技术使得不同源间的网站也能够进行上述行为的技术就叫做跨域；跨域的实现形式有以下几种：

• 1、降域；
• 2、JSONP；（只支持GET请求，无法判断请求是否失败，没有错误处理但其兼容性强，支持老式浏览器，以及可以向不支持CORS的网站请求数据）
• 3、CORS；（支持IE11及以上浏览器）

CORS兼容性

• 4、HTML5中的PostMessage方法
• 5、通过hash方法
• 6、通过window.name的方法

跨域的8种方法见：前端解决跨域问题的8种方案（最新最全）

（三）、jsonp 的原理是什么？

原理是利用

将上述代码放在我http://127.0.0.1:8080/renwu24_1.html 路径中（8080端口），而我把请求的ajax的url写成http://127.0.0.1:8081/renwu24_1.php （8081端口）

Paste_Image.png

上述代码运行后，会报错：

Paste_Image.png

因为正常情况下，不同源网站间不允许ajax请求；

（二）、至少使用一种方式解决跨域问题

1、cors跨域资源共享解决跨域问题：

例如对于上面的例子，我们可以在php文件中添加header('Access-Control-Allow-Origin: http://127.0.0.1:8080'); 这一行代码即可：

这样便可实现ajax的跨域请求；

2、使用jsonp方法解决跨域问题：

以上代码我放在：http://127.0.0.1:8080/renwu24_1.html （8080端口）中，然后在http://127.0.0.1:8081/renwu24_1.php （8081端口）中写如下代码：

foo({
  "ip": "8.8.8.8"
});

这样代码运行后，会直接在控制台打出：Your public IP address is: 8.8.8.8

Paste_Image.png

**本文版权归本人即笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *