浏览器跨域原因及解决方式

一、为什么会有跨域

浏览器的同源策略 用于限制一个源的文档或它所加载的脚本如何能与另一个源交互。

它能帮助阻隔恶意文档，减少可能被攻击的媒介

二、什么是同源

两个url，只要它们的协议、域名、端口有一个不相同，就会导致跨域，如果相同，则表示他们是同源的。

有如下网址：http://store.company.com/dir/page.html

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同（http:// 默认端口是 80）
http://news.company.com/dir/other.html	失败	主机不同

三、如何解决跨域

解决跨域的方式有很多种，在项目中常用的是通过 Cors 解决的。

其他解决方式如下：

1. Jsonp

缺点： 只支持get请求、无法对返回结果处理
优点： 兼容性好

借助了 script 标签上的 src 属性不受同源策略的影响这一机制。

JSONP（JSON with Padding）是一种解决跨域请求的方法，通常用于在浏览器中通过 script 标签获取跨域数据。

JSONP的基本原理是利用了 script 标签的跨域特性，通过动态创建 script 标签来请求远程服务器的资源，从而绕过浏览器的同源策略。

2. Node、Nginx 代理

缺点： 工作量大
优点： get和post都支持、扩展性强

用 Node 服务器代理客户端和目标服务器之间的网络请求。服务器与服务器之间没有同源策略，Node 代理服务器监听客户端请求，转发给目标服务器，再接收响应发给客户端。

3. cors

缺点： 不支持低版本浏览器、会增加一个预检请求
优点： get和post都支持，扩展性强

跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。

跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头