关于跨域的理解

Posted 2021-01-16 yuanjia2717

什么是跨域？
浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域

主域名不同 http://www.baidu.com/index.html –>http://www.sina.com/index.js
子域名不同 http://www.tieba.baidu.com/index.html –>http://www.map.baidu.com/index.js
域名和域名ip http://www.baidu.com/index.html –>http://110.129.131.27/index.js
端口不同 http://www.baidu.com:8080/index.html–> http://www.baidu.com:8081/index.js
协议不同 http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/index.js

备注：
1、端口和协议的不同，只能通过后台来解决
2、localhost和127.0.0.1虽然都指向本机，但也属于跨域
3、同源策略是指，请求的url地址，必须与浏览器上的url地址处于同域上，即域名相同，端口相同，协议相同

 

如何解决跨域问题？

JSONP:
jsonp全称是json with padding，是为了解决跨域请求资源而产生的解决方案，是一种依靠开发人员创造出的非官方跨域数据交互协议。
JSON、JSONP的区别：
1、JSON返回的是一串数据、JSONP返回的是脚本代码(包含一个函数调用)
2、JSONP 只支持get请求、不支持post请求(类似往页面添加一个script标签，通过src属性去触发对指定地址的请求,故只能是Get请求)
JSONP（JSON with Padding：填充式JSON)，应用JSON的一种新方法

nginx反向代理：
www.baidu.com/index.html需要调用www.sina.com/server.php，可以写一个接口www.baidu.com/server.php，由这个接口在后端去调用
www.sina.com/server.php并拿到返回值，然后再返回给index.html

PHP端修改header：
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

document.domain：
跨域分为两种，一种xhr不能访问不同源的文档，另一种是不同window之间不能进行交互操作;
document.domain主要是解决第二种情况，且只能适用于主域相同子域不同的情况；
document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

window.name：
关键点：window.name在页面的生命周期里共享一个window.name;
兼容性：所有浏览器都支持；
优点：
最简单的利用了浏览器的特性来做到不同域之间的数据传递；
不需要前端和后端的特殊配制；
缺点：
大小限制：window.name最大size是2M左右，不同浏览器中会有不同约定；
安全性：当前页面所有window都可以修改，很不安全；