前端程序使用ExtJS的写，在本地测试，发送请求到服务器时，发现存在跨域的问题，饼干也没有一套成功，于是乎在这里整理一下解决过程
由于篇幅较长，不想看解决过程的可以翻译到最后看
总结1.跨域允许
2.客户端无法携带跨域cookie
3.因为加了与证件报文头，可能是客户端不知道服务器允许不允许报的错
4.由于客户端不知道服务端是否允许
POST请求而报的错
假设我的服务器IP是120.111.111.123
本地的html
index.html
<html><head> <meta charset="utf8"></head><body> <input type="button" onclick="request()" value="请求"></body><script type="text/javascript" src="./ext-all.js"></script><script type="text/javascript"> function request(){ Ext.Ajax.request({ url: 'http://120.111.111.123/setcookie.php', method: 'POST', params: { 'text': 'hello world' }, success: function(transport){ // do something }, failure: function(transport){ alert("Error: " - transport.responseText); } }); }</script></html>
服务器的php文件#path setcookie.php
<?php
session_start();
?>
点击“请求”按钮，发送请求后发现JS报错
XMLHttpRequest cannot load http://120.111.111.123/setcookie.php.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.
报这个错就说明我们跨域了，不在允许的访问源，于是乎我在服务的setcookie.php加入
header('Access-Control-Allow-Origin:*');
网求允许所有源
<?phpsession_start();header('Access-Control-Allow-Origin:*'); // 功能...// ...
然后又报错
XMLHttpRequest cannot load http://120.111.111.123/setcookie.php. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.
这次的报错是因为，在跨域的时候，ExtJS的不会直接发帖子请求，而是先发送一个选项请求，看看服务器允许什么访问头（比如是不是允许后请求），验证成功后才会发送真正的请求
用谷歌的开发者工具抓的option报文OPTIONS /setcookie.php HTTP/1.1Host: 120.111.111.123Connection: keep-alivePragma: no-cacheCache-Control: no-cacheAccess-Control-Request-Method: POSTOrigin: nullUser-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36Access-Control-Request-Headers: x-requested-withAccept: /Accept-Encoding: gzip, deflate, sdchAccept-Language: zh-CN,zh;q=0.8
接下来，我们只要发送我们允许什么请求头就行了
path /setcookie.php
session_start();header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:OPTIONS, GET, POST'); // 允许option，get，post请求header('Access-Control-Allow-Headers:x-requested-with'); // 允许x-requested-with请求头header('Access-Control-Max-Age:86400'); // 允许访问的有效期
// 功能...// ...
继续测试我们的新功能，成功的解决了跨域问题
1.png
但是，饼干没有“设置成功”。而之所以没有“设置成功”，是因为cookie的存在本地，但是每个饼干都有一个域名，当你本地的饼干中存在你当前访问的域时，才会被带过去，而我的index.html的文件是本地访问的，即
[HTTP：//localhost/index.html，而饼干的域是120.111.111.123的，所以不行了于是乎继续改
path index.html
<html>
<head>
<meta charset="utf8">
</head>
<body>
<input type="button" onclick="request()" value="请求">
</body>
<script type="text/javascript" src="./ext-all.js"></script>
<script type="text/javascript"> function request(){
Ext.Ajax.request({
url: 'http://120.111.111.123/setcookie.php',
method: 'POST',
params: {
'text': 'hello world'
},
withCredentials: true, # 加了这个
success: function(transport){
// do something
},
failure: function(transport){
alert("Error: " - transport.responseText);
}
});
}
</script>
</html>
继续访问，报错
XMLHttpRequest cannot load http://120.111.111.123/setcookie.php.
Response to preflight request doesn't pass access control check: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true.
Origin 'null' is therefore not allowed access.
The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.
现在这个错误产生的原因就是
1，因为加入了withCredentials之后，访问控制允许来源就不能用“*”了，既然不允许访问这个源，那我就让你发个报文头让你允许
访问呗！
<?php#path setcookie.phpsession_start();// 是否存在请求源if(isset($_SERVER["HTTP_ORIGIN"])) { header('Access-Control-Allow-Origin:'.$_SERVER["HTTP_ORIGIN"]); }header('Access-Control-Allow-Methods:OPTIONS, GET, POST');header('Access-Control-Allow-Headers:x-requested-with');header('Access-Control-Max-Age:86400');// 功能...// ...?>
好了，上传完代码，继续测试。发送请求之后，又报错了（这错中错，一个个坑搞的大家都看得不耐烦了吧，我保证，这是最后一个报错了）
XMLHttpRequest cannot load http://120.111.111.123/setcookie.php.
Response to preflight request doesn't pass access control check: Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'null' is therefore not allowed access.
大概的意思就是说我给你发了withCredentials报文头，但是你服务器没有跟我说允许我带这个报文头，那么解决方法就是加上允许发这个报文头的报文头
path setcookie.php<?phpsession_start();// 是否存在请求源if(isset($_SERVER["HTTP_ORIGIN"])) { header('Access-Control-Allow-Origin:'.$_SERVER["HTTP_ORIGIN"]); }header('Access-Control-Allow-Origin:null'); header('Access-Control-Allow-Methods:OPTIONS, GET, POST');header('Access-Control-Allow-Headers:x-requested-with');header('Access-Control-Max-Age:86400');header('Access-Control-Allow-Credentials:true');// 功能...// ...?>
接下来进行最终的测试，BIU〜成功了，终于成功了!!!（0.0自己嗨起来了）
2.png
接下来总结一下，之所以跨域会引起那么多问题，都是因为耿直的客户端，发什么类型的请求都要服务器允许，而且要明文允许，允许的内容包括如下
1.网求允许跨域
解决方法：服务器发送允许客户端发送源的报文头
标头（ '访问控制允许来源：'。$ _ SERVER [ “HTTP_ORIGIN”]）;
4.png
2.客户端无法携带跨域cookie的
这个时候就可以在ExtJS的中加入withCredentials
Ext.Ajax.request({ url: 'http://120.111.111.123/setcookie.php', method: 'POST', params: { 'text': 'hello world'
},
withCredentials: true, success: function(transport){ // do something
},
failure: function(transport){
alert("Error: " - transport.responseText);
}
});
3.因为加了withCredentials报文头，可是客户端不知道服务器允不允许报的错
（耿直的客户端）
这个时候就在服务器发送接入控制允许证书
header('Access-Control-Allow-Credentials:true');
4.由于客户端不知道服务端是否允许
POST而请求作者：的错
这个时候要在服务器端的加入
header('Access-Control-Allow-Methods:OPTIONS, GET, POST');header('Access-Control-Allow-Headers:x-requested-with');header('Access-Control-Max-Age:86400');
以上汇总起来就是
header('Access-Control-Allow-Methods:OPTIONS, GET, POST');header('Access-Control-Allow-Headers:x-requested-with');header('Access-Control-Max-Age:86400'); header('Access-Control-Allow-Origin:'.$_SERVER['HTTP_ORIGIN']);header('Access-Control-Allow-Credentials:true');header('Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS');header('Access-Control-Allow-Headers:x-requested-with,content-type');header('Access-Control-Allow-Headers:Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With');
代码已经放到
[github上
](https://github.com/HBLong/extjsCorsDemo)了，有啥问题欢迎大家指出
网友评论