前端

前端跨域请求的几种解决方法

终于忙完啦，又有时间写博客了=、=，虽然这篇很水，这篇文章将简单介绍跨域问题的起因和几种常用的前端解决跨域的方法。

跨域问题的起源–同源策略

浏览器的同源策略限制了一个源加载的文档或脚本如何与来自另一个源的资源进行交互，是一个用于隔离潜在恶意文件的关键的安全机制。

只有当协议(Protocol)，主机(host)和端口(port)相同的时候下，两个资源才是同源的。

比如：http://www.cxyblogbiu.com:80

其中 http 为协议(Protocol)

www.cxyblogbiu.com 为主机(host)

80 为端口

只要一个不同，那么就是不同的源。

当网络操作跨域时，浏览器就诸多限制。

跨域解决方法

修改 document.domain

可以通过修改document.domain，将当前域设置为当前域或当前域的超级域。

比如：将 http://www.cxyblogbiu.com 设置为 http://cxyblogbiu.com，那么就可以通过http://cxyblogbiu.com的同源验证啦~

JSONP

但是与后台交互请求时，跨域就会相当麻烦，JSONP就是依靠同源策略允许跨域资源嵌入，来实现跨域请求。

只需要通过 <script src=""> 的方式来请求接口，然后后台返回一个回调函数，包裹返回的数据，这样返回后，浏览器会自动执行回调函数，传入回调的数据。

但是这个方法缺点很多：

  1. 必须是GET请求
  2. 需要在数据外再包裹一层回调函数
  3. 回调函数需要处于全局环境下

CORS(跨域资源共享)

同源策略带来的跨域请求是浏览器独有的，但是为了提高web应用的可用性，浏览器支持跨域请求是必然的，于是有了CORS(跨域资源共享)，这将是解决跨域请求的最优策略

CORS的使用需要后端支持，需要在响应头上加入一些CORS的字段：

  1. Access-Control-Allow-Origin

    这个字段用来表明允许的源，可以是固定的源，也可以使用 * 来表明允许所有的源

  2. Access-Control-Allow-Methods

    这个字段表明允许的请求方式，
    比如：Access-Control-Allow-Methods: POST, GET, OPTIONS

支持后就可以用啦

后记

没错，这就写完了，是不是一脸懵逼0、0，

我也是的，一个demo都没有，一个详细的说明也没有=、=

这篇文章注定会回来填坑的，

跨域可不止是请求有跨域哦-、-，还有页面间的跨域，存储空间的跨域~~

参考资料

MDN_同源策略

MDN_CORS

END

2017-05-05 完成

2016-12-12 立项