跨域

什么是跨域

要了解跨域,首先要知道浏览器的同源策略,同源策略是浏览器的一个安全策略,它用于限制一个源的文档或者它加载的脚本如何能与另一个元的资源进行交互。她的本意是用于阻隔恶意文档,减少可能被攻击的媒介。

同源的定义

如果两个URL的协议(protocol)、端口(port)、主机(host)都相同的话,则这两个URL是同源的。

跨源网络访问

同源策略控制不同源之间的交互,例如在使用XMLHttpRequest<img>标签时则会受到同源策略的约束。这些交互通常分为三类:

  • 跨域写操作(Cross-origin writes)一般是被允许的例如链接(links),重定向以及表单提交。特定少数的HTTP请求需要添加 preflight。
  • 跨域资源嵌入(Cross-origin embedding)一般是被允许。
  • 跨域读操作(Cross-origin reads)一般是不被允许的但常可以通过内嵌资源来巧妙的进行读取访问。例如,你可以读取嵌入图片的高度和宽度,调用内嵌脚本的方法。

如何允许跨域访问

JSONP方式

JSONP就是利用了<scrpit>标签被允许跨域的特性,在标签的的src属性中填写和服务端约定好的接口并带上指定参数比如www.expaml.com?callback=fn,服务端在接口中返回用fn(res)其中res是接口返回的值,前端在全局创建同名函数,这样就巧妙的实现了跨域的前后端通信。但JSONP有安全性问题所以不推荐使用。

CORS方式

使用跨域资源共享允许跨域访问,CORS是HTTP的一部分,它允许服务器指定其他主机能否在自己处获取内容。