摘要：而之所以沒有設(shè)置成功，是因為存在本地，但是每個都有一個，當(dāng)你本地的中存在你當(dāng)前訪問的域時，才會被帶過去，而我的文件是本地訪問的，即，而的域是的，所以不行了。

前端程序使用extjs寫，在本地測試，發(fā)送請求到服務(wù)器時，發(fā)現(xiàn)存在跨域的問題，cookie也沒有set成功，于是乎在這里整理一下解決過程

由于篇幅較長，不想看解決過程的可以翻到最后看總結(jié)
1.跨域允許
2.客戶端無法攜帶跨域cookie
3.因為加了withCredentials報文頭，可是客戶端不知道服務(wù)器允不允許報的錯
4.由于客戶端不知道服務(wù)端是否允許POST請求而報的錯

假設(shè)我的服務(wù)器IP是120.111.111.123

# 本地的html
# index.html



    


    

#服務(wù)器的php文件
#path setcookie.php

點擊“請求”按鈕，發(fā)送請求后發(fā)現(xiàn)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.

報這個錯就說明我們跨域了，不在允許的訪問源，于是乎我在服務(wù)的setcookie.php加入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不會直接發(fā)post請求，而是先發(fā)送一個option請求，看看服務(wù)器允許什么訪問頭（比如是不是允許post請求），驗證成功后才會發(fā)送真正的請求
#用谷歌的開發(fā)者工具抓的option報文
OPTIONS /setcookie.php HTTP/1.1
Host: 120.111.111.123
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Access-Control-Request-Headers: x-requested-with
Accept: */*
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8
接下來，我們只要發(fā)送我們允許什么請求頭就行了
#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"); // 允許訪問的有效期

// 功能...
// ...
繼續(xù)測試我們的新功能，成功的解決了跨域問題

but，cookie沒有“設(shè)置成功”。而之所以沒有“設(shè)置成功”，是因為cookie存在本地，但是每個cookie都有一個domain，當(dāng)你本地的cookie中存在你當(dāng)前訪問的域時，才會被帶過去，而我的index.html文件是本地訪問的，即http://localhost/index.html，而cookie的域是120.111.111.123的，所以不行了。于是乎繼續(xù)改
#path index.html


    


    




繼續(xù)訪問，報錯
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.
現(xiàn)在這個錯誤產(chǎn)生的原因就是
1.因為加入了withCredentials之后，Access-Control-Allow-Origin就不能用“*”了，既然不允許訪問這個源，那我就讓你發(fā)個報文頭讓你允許訪問唄！

好了，上傳完代碼，繼續(xù)測試。發(fā)送請求之后，又報錯了（這錯中錯，一個個坑搞的大家都看得不耐煩了吧，我保證，這是最后一個報錯了）
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.
大概的意思就是說我給你發(fā)了withCredentials報文頭，但是你服務(wù)器沒有跟我說允許我?guī)н@個報文頭，那么解決方法就是加上允許發(fā)這個報文頭的報文頭
# path setcookie.php

接下來進(jìn)行最終的測試，biu~成功了，終于成功了?。。。?.0自己嗨起來了）

接下來總結(jié)一下，之所以跨域會引起那么多問題，都是因為耿直的客戶端，發(fā)什么類型的請求都要服務(wù)器允許，而且要明文允許，允許的內(nèi)容包括如下
1.跨域允許
解決方法：服務(wù)器發(fā)送允許客戶端發(fā)送源的報文頭
header("Access-Control-Allow-Origin:".$_SERVER["HTTP_ORIGIN"]); 

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報文頭，可是客戶端不知道服務(wù)器允不允許報的錯（耿直的客戶端）
這個時候就在服務(wù)器發(fā)送Access-Control-Allow-Credentials
header("Access-Control-Allow-Credentials:true");
4.由于客戶端不知道服務(wù)端是否允許POST請求而報的錯
這個時候要在服務(wù)器端加入
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");
代碼已經(jīng)放到github了，有啥問題歡迎大家指出