如何解决跨域的问题

我们都知道，浏览器为了保证安全的问题，不允许跨域调用其他页面的对象，对于我们的日常使用会带来许多的不便。因此出现了跨域的解决方案。

我通过学习了很多网上的文章，总结和整理了一下常用的跨域技巧。

首先来说一下，什么是跨域。

只有当协议、域名和端口号相同的时候才能算是同一个域名，否则就需要做跨域处理。

举例来说，http://www.example.com/dir/index.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略)

跨域方法

1. jsonp跨域

主要原理：通过动态构建 script 标签来实现跨域请求，因为浏览器对 script 标签的引入没有跨域的访问限制。

在请求的url后指定一个回调函数

服务器端返回一个json数据包装的回调函数。

优点：

• 在比较旧的浏览器中也可以使用，兼容性很好

• 不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果

缺点：

• 只能支持GET请求
• 只能解决跨域HTTP请求，不能解决不同域的页面之间的通信
• 没有办法知晓请求是否异常

2. CORS 跨域资源共享

目前所有的浏览器都支持CORS跨域，但IE浏览器需要不低于IE10版本。

整个通信过程中，浏览器会自动完成，并不需要用户的参与，所以外在看来与AJAX没有什么差别，但是实际上会附加一些头信息或者多一次附加的请求。

浏览器将 CORS 请求分成两类：简单请求和非简单请求。

• 简单请求

浏览器直接发出 CORS 请求。具体来说，就是会在头信息之中，增加一个 Origin 字段。Origin 字段用来说明本次请求来自哪个源。服务器根据这个值，决定是否同意这次请求。对于如果 Origin 指定的源，不在许可范围内，服务器会返回一个正常的 HTTP 回应。浏览器发现，这个回应的头信息没有包含 Access-Control-Allow-Origin 字段，就知道出错了，从而抛出一个错误，ajax 不会收到响应信息。如果成功的话会包含一些以 Access-Control- 开头的字段。

• 非简单请求

对服务器有特殊要求的请求，比如说PUT或者DELETE。

浏览器会在正式通信之前，先发出一次HTTP查询请求，也称为预检请求，来判断该域名是否在服务器的白名单中，如果收到肯定回复后才会发起请求。

与JSONP的比较

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

具体的CORS学习，大家可以去看看下面这篇文章：

跨域资源共享 CORS 详解 - 阮一峰的网络日志