详解Ajax跨域问题之原理机制

一、跨域

理解：域，这里是指当前URL路径和要访问的目标服务器的地址是同一个协议+域名+端口，三者都相同才不会产生跨域的问题，只要有一个条件不满足，就会产生跨域问题，即违背了同源策略。

目前市场上支持JavaScript的浏览器，都会有这个策略。从安全性的角度来看，浏览器会限制从脚本发起的跨域HTTP请求。比如遵守同源策略的“XMLHttpRequest”对象，简称XHR。这意味着使用XHR的Web应用程序只能从应用程序（如Ajax）当前的域请求HTTP资源，或者资源请求成功但被浏览器拦截。打开浏览器控制台，会发现如下Error信息：

也就是说，需要在服务器端给请求头添加“Access-Control-Allow-Origin”字段，来允许浏览器跨域请求，实现跨域资源共享。

二、跨域资源共享（CORS）

跨域资源共享是一种机制，它使用额外的 HTTP 头来告诉浏览器 ，让运行在一个 origin (域) 上的Web应用被准许跨域访问目标服务器上指定的资源。

另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。

实际上，关于浏览器的预检请求，通常会发生在以下情况：

1、使用了这些HTTP请求方式：PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH。

2、认为设置了头字段为Accept、Accept-Language、Content-Language、Content-Type中的一种。

3、在设置了Content-Type时，值不是：application/x-www-form-urlencoded、multipart/form-data、text/plain。

以上，祝好。若有错误或者缺漏，还请指正，谢谢。

 

参考资料：HTTP访问控制（CORS）