跨域 post 请求

跨域（Cross-Orgin Resource Sharing）

所谓的跨域限制是存在浏览器中的，服务端间访问并没有这样的限制。而就是因为浏览器有个跨域限制的行为，所以在介绍和解决跨域传输数据的问题之前需要先了解这个限制行为是什么， 目的是什么，之后，才能更好的解决问题。

关于跨域的第一个接触到的问题就是为什么会跨域，就是因为浏览器的 同源策略。

同源策略（Same-origin policy， SOP）

概念

• 相同协议
• 相同域名
• 相同端口

举例来说 http://www.example.com/ctr/index.html 这个网址的，协议是 http，域名是 www.example.com，端口是 80 （http默认端口）,那么下面例子进行对比说明同源的情况：

目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？

很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是， Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。

由此可见，”同源政策”是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

限制范围

1. Cookie、LocalStorage 和 IndexDB 无法读取。
2. DOM 无法获得。
3. AJAX 请求不能发送。

也正是因为这些安全策略的保护，让我们更安心上网，但是，同样限制了我们的一些需求，特别是针对开发人员。也就是最近在开发中出现了这个问题，那么，下面就来说下关于 跨域post的解决办法。不过，在真正贴出解决办法的代码之前，还需要了解一个定义 预请求

简单的跨域请求和预请求

简单的跨域请求

简单请求就是指

• 使用 GET，HEAD 或者 POST，而不使用自定义请求头（类似 X-Modified）
• 如果是 POST，则请求的 Content-Type 应该为：application/x-www-form-urlencode, multipart/form-data, text/plain。

而只要是如上这些 Content-Type，服务器的相应头里面的 Access-Control-Allow-Orgin 会被设置成为 * 。

就是可以访问其网站上的任意数据。

预请求

不同于简单请求，预请求需要先发送一个 OPTIONS 请求给目的站点，来预先访问该跨站点请求是否是安全可信任的。

当具备以下条件就会当成预请求处理：

• 请求以GET,HEAD或者POST以外的方式请求。再或者POST的数据类型非简单请求的数据类型，即非 application/x-www-form-urlencode, multipart/form-data， text/plain，比如说 application/json 或者 application/xml。
• 使用自定义请求头

预检请求发送的时候，最关键的就是 header 中的 origin，举例来说：

OPTIONS /cors HTTP/1.1
Origin: http://api.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.localhost.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

该 Origin 表示来自哪个源。预请求的回应也就是我们要针对跨域 POST 做的事情了。

针对跨域 post 的解决办法

先说解决办法，在 http 响应头中添加如下内容

header('Access-Control-Allow-Credentials: true');
header("Access-Control-Allow-Origin: $httpReferer");
header('Access-Control-Allow-Methods:GET,POST,OPTIONS');

刚刚在 header 中添加的内容的解释：

• Access-Control-Allow-Origin：该字段是必须的。它的值要么是请求时 Origin 字段的值，要么是一个*，表示接受任意域名的请求。
• Access-Control-Allow-Credentials：该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。
• Access-Control-Allow-Methods：该字段是必须的，用来列出浏览器的 CORS 请求会用到哪些 HTTP 方法，上例是 PUT,POST,OPTIONS

其他关于跨域 POST 请求的解决办法

• Server Proxy：当前域实现一个代理，所有向外部域名发送的请求都经由该代理中转。
• Flash Proxy：服务端部署跨域策略文件 crossdomain.xml，页面利用不可见的swf跨域post提交数据实现跨域通信。
• Invisible Iframe：通过 js 动态生成不可见表单和iframe，将表单的 target 设为 iframe 的 name 以此通过 iframe 做 post 提交。

参考文章

• HTTP访问控制( developer.mozilla 组织网/zh-CN/docs/Web/HTTP/Access_control_CORS)
• Cross-Origin Resource Sharing( www.w3 组织网/TR/cors/)
• Same-origin policy( developer.mozilla 组织网/en-US/docs/Web/Security/Same-origin_policy)