关于跨域的理解

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

主域名不同 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都可以修改,很不安全;

原文地址:https://www.cnblogs.com/yuanjia2717/p/9893384.html