前端跨域方法总结

为什么需要跨域

浏览器处于安全的考虑，引入了同源策略。这种策略会对我们页面上执行的js访问资源时进行限制。
比如：

  1. 不能通过js访问不同源之下页面的DOM结构，
  2. 对不同源发送请求也无法获得服务器的相应。
  3. 也不能访问不属于同源下的cookie，localstorage等

何为 同源 ：指的是访问的目标url和当前页面的url两者的协议，端口，域名，ip只要有一个不同，则属于不同的源。

常用的跨域方法

1、CORS 跨域资源共享。通过设置请求方法的请求头，来实现跨域

1
2
3
Access-Control-Allow-Origin
Access-Control-Allow-Methods：对客户端回应服务器支持的请求方法列表；
Access-Control-Allow-Headers：对客户端回应服务器支持的Header；

2、JSONP 但是只能用于get请求

3、Cookie跨域共享

1
2
3
4
5
1.配置服务端返回的 Set-Cookie响应头
2.在页面上的JavaScript代码中通过document.cookie，直接设置document.cookie为我们需要存储的内容。
例如：
document.cookie="name=Jack;path=/"
document.cookie="age=25;path=/" // cookie中会同时保存name和age这两个字段

跨页面通信

1、document.domian

1
2
1、两个页面所在的源是一样的，可以直接通信，但是如果两个页面所在的域名相同，但是端口不同或者其他情况，那么两个页面仍需要设置相同的document.domain,否则还是会被浏览器block掉
2、需要在前入的iframe加载完成之后才能和其加载的子页面进行通信，否则拿到的值可能还是undefined

2、window对象name属性

1
浏览器具有这样一个特性：同一个标签页或者同一个iframe框架加载过的页面共享相同的window.name属性值，意味着只要是在同一个标签页里面打开过的页面（不管是否同源），这些页面上的window.name属性值都是相同的。利用这一特性在不同页面作为传递数据的介质

3、HTML5 cross-document message

1
html5中引入了另外一种跨页面通信的方式：跨文档消息传送。同样可以实现主页面和嵌入的iframe子页面（或者由当前页面打开的页面）之间完成数据的传递，另外这种方法也可以用于当前JavaScript引擎线程和其他worker线程之间完成数据交换。如果是与iframe加载的子页面进行通信，则需要先获取到接收数据的目标页面的window对象，通过该对象的postMessage方法可以向目标页面发送数据。

4、locakStorage

1
localStorage是HTML5引入的客户端存储方案，通过localStorage存储的内容会一直保存在客户端，除非调用removeItem方法显式移除，否则内容将永久保留。

其他跨域问题

1、跨域脚本错误处理

对于页面上加载的跨域脚本执行出错，页面上绑定的错误处理函数window.onerror在默认情况下是获取不到具体的错误信息的，这时候需要在加载跨域脚本的标签上使用crossorigin属性，也就是在请求跨域脚本的时候执行CORS。crossorigin属性可以设置的值有：

1
2
anonymous：请求脚本的时候不会携带凭据
use-credentials：请求脚本的时候携带凭据

设置为其他值都会被看作是anonymous关键字。设置了crossorigin属性意味着还需要对服务器进行配置，使其支持CORS。如果服务端没有正确配置CORS，跨域脚本是无法正常下载的。