浏览器跨域判断，浏览器解决跨域问题

一、跨域概念

随着互联网的发展,网络应用已经成为我们必不可少的一部分。但是，从网络安全角度考虑，不同源（域名，协议，端口）的客户端脚本在没有明确授权的情况下，不能读写对方的资源。这就是同源策略所要解决的问题。具体来讲，就是只有协议，域名，端口都相同才满足同源策略，也就是说，如果我们在前端JavaScript操作非自己的服务器时，同源策略就会让我们无法正常完成交互，而这被称为“跨域”。

二、跨域分类

在Web前端中，跨域可以分为不同的类型：同站跨域，同源但端口不同跨域，不同源跨域等。同站跨域实际上是前后端共用同一域名的情况，我们一般可以使用代理或者进行服务端跨域来解决这个问题。同源但端口不同的情况我们可以通过JSONP方式进行解决，而不同源跨域问题则可采用CORS，window.name等解决方案。

三、JSONP方式解决跨域问题

JSONP是一种前端跨域解决方案。JSONP原理是利用script标签的异步加载能力，在页面上引入一个js文件，文件的内容可以是任意合法的js代码，服务器端不通过ajax方式返回数据，而是将数据作为js脚本返回，从而执行这段脚本，由于脚本是在同一个作用域下执行的，所以就不会出现跨域访问的问题。

四、CORS实现跨域

CORS（Cross-Origin Resource Sharing）即跨域资源共享，是一个W3C标准，也是目前解决跨域最好的方案之一。它需要服务器实现特定的响应头来允许客户端跨域访问。安全性较高，但是对服务器压力较大。

五、window.name方式解决跨域

window.name方式是一种较老的跨域方案，它的原理是将需要跨域传输的数据存放在一个被隐藏的iframe的window.name属性中，然后在跳转到同源页面时读取该属性来获取数据。

六、nginx反向代理实现跨域

Nginx是一款高性能的HTTP和反向代理服务器，可以通过反向代理让原本无法直接访问的服务器能够被访问。通过Nginx反向代理实现跨域，可以让前端与后端的交互变得更加合理化与简单化。

七、Access-Control-Allow-Origin设置响应头解决跨域

Access-Control-Allow-Origin是一个头部信息，用来告诉浏览器当前响应的资源是否允许跨域请求进行访问。如果服务器返回正确的跨域响应头，那么WebSocket、AJAX等技术就可以自由地跨域请求资源了。

八、请求类型对跨域的影响

一般情况下，GET 请求可能会产生跨域问题而 POST 请求不会。但是，当我们使用非原生AJAX请求的时候，可能会出现乱码或失败的情况，需要特殊处理。在jQuery中，通过设置contentType为"application/x-www-form-urlencoded"，并使用JSON.stringify处理参数后，非原生AJAX的POST请求也可以在大部分情况下做到跨域请求。

文章TAG：浏览  浏览器  判断  解决  浏览器跨域判断