跨域产生的原因

跨域产生的原因

最近调整项目时老是碰到跨域的问题，索性做一个总结，方便后面查询复习使用：

1.跨域是什么意思？
首先一个url是由：协议、域名、端口 三部分组成。（一般端口默认80）
如：https://blog.moonlet.cn:80
当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。

2.跨域产生原因？
出于浏览器的同源策略限制。

同源策略（Same Orgin Policy）是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。。所谓同源（即在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。

3.当前面临的情况
通常为了减轻web服务器的负载，我们把js、css、图片等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许。

html中有的标签天然支持跨域，<script>、<img>、<iframe>、<link>等有 src 属性的标签都可以加载跨域资源，
而不受同源限制，比如<script src="http://www.baidu.com"></script>，但是只支持get请求。

但对于其他方式发起的请求，浏览器会限制脚本中发起的跨域请求。比如，使用 XMLHttpRequest 对象和Fetch发起 HTTP 请求就必须遵守同源策略（常用的方式应该是ajax）。

Web 应用程序通过 XMLHttpRequest 对象或Fetch能且只能向同域名的资源发起 HTTP 请求，而不能向任何其它域名发起请求。

不允许跨域访问并非是浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。

最好的例子是CSRF跨站攻击原理，请求是发送到了后端服务器,无论是否设置允许跨域。

通常服务端都是采用设置返回头的方式来让浏览器加载跨域的资源。
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

有些浏览器不允许从HTTPS跨域访问HTTP，比如Chrome和Firefox，这些浏览器在请求还未发出的时候就会拦截请求,这是特例。

4.当解决方式
解决方式网上有很多，就不再赘述，可参考一下两篇博客

什么是跨域？跨域产生原因与解决方式

jQuery jsonp跨域请求

SpringBoot多跨域请求的支持（JSONP）