摘要:而之所以沒有設置成功,是因為存在本地,但是每個都有一個,當你本地的中存在你當前訪問的域時,才會被帶過去,而我的文件是本地訪問的,即,而的域是的,所以不行了。
前端程序使用extjs寫,在本地測試,發送請求到服務器時,發現存在跨域的問題,cookie也沒有set成功,于是乎在這里整理一下解決過程
由于篇幅較長,不想看解決過程的可以翻到最后看總結
1.跨域允許
2.客戶端無法攜帶跨域cookie
3.因為加了withCredentials報文頭,可是客戶端不知道服務器允不允許報的錯
4.由于客戶端不知道服務端是否允許POST請求而報的錯
假設我的服務器IP是120.111.111.123
# 本地的html # index.html
#服務器的php文件 #path setcookie.php
點擊“請求”按鈕,發送請求后發現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:*");允許所有源
然后又報錯
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不會直接發post請求,而是先發送一個option請求,看看服務器允許什么訪問頭(比如是不是允許post請求),驗證成功后才會發送真正的請求
#用谷歌的開發者工具抓的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接下來,我們只要發送我們允許什么請求頭就行了
#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"); // 允許訪問的有效期 // 功能... // ...繼續測試我們的新功能,成功的解決了跨域問題
but,cookie沒有“設置成功”。而之所以沒有“設置成功”,是因為cookie存在本地,但是每個cookie都有一個domain,當你本地的cookie中存在你當前訪問的域時,才會被帶過去,而我的index.html文件是本地訪問的,即http://localhost/index.html,而cookie的域是120.111.111.123的,所以不行了。于是乎繼續改#path index.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之后,Access-Control-Allow-Origin就不能用“*”了,既然不允許訪問這個源,那我就讓你發個報文頭讓你允許訪問唄!好了,上傳完代碼,繼續測試。發送請求之后,又報錯了(這錯中錯,一個個坑搞的大家都看得不耐煩了吧,我保證,這是最后一個報錯了)
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接下來進行最終的測試,biu~成功了,終于成功了!!!(0.0自己嗨起來了)
接下來總結一下,之所以跨域會引起那么多問題,都是因為耿直的客戶端,發什么類型的請求都要服務器允許,而且要明文允許,允許的內容包括如下
1.跨域允許
解決方法:服務器發送允許客戶端發送源的報文頭
header("Access-Control-Allow-Origin:".$_SERVER["HTTP_ORIGIN"]);2.客戶端無法攜帶跨域cookie
這個時候就可以在extjs中加入withCredentialsExt.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報文頭,可是客戶端不知道服務器允不允許報的錯(耿直的客戶端)
這個時候就在服務器發送Access-Control-Allow-Credentialsheader("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了,有啥問題歡迎大家指出
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/22635.html
摘要:而之所以沒有設置成功,是因為存在本地,但是每個都有一個,當你本地的中存在你當前訪問的域時,才會被帶過去,而我的文件是本地訪問的,即,而的域是的,所以不行了。 前端程序使用extjs寫,在本地測試,發送請求到服務器時,發現存在跨域的問題,cookie也沒有set成功,于是乎在這里整理一下解決過程 由于篇幅較長,不想看解決過程的可以翻到最后看總結1.跨域允許2.客戶端無法攜帶跨域cooki...
摘要:面試題來源于網絡,看一下高級前端的面試題,可以知道自己和高級前端的差距。 面試題來源于網絡,看一下高級前端的面試題,可以知道自己和高級前端的差距。有些面試題會重復。 使用過的koa2中間件 koa-body原理 介紹自己寫過的中間件 有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理 如何和MySQL進行通信 React聲明周期及自己的理解 如何...
摘要:面試的公司分別是阿里網易滴滴今日頭條有贊挖財滬江餓了么攜程喜馬拉雅兌吧微醫寺庫寶寶樹海康威視蘑菇街酷家樂百分點和海風教育。 (關注福利,關注本公眾號回復[資料]領取優質前端視頻,包括Vue、React、Node源碼和實戰、面試指導) 本人于7-8月開始準備面試,過五關斬六將,最終抱得網易歸,深深感受到高級前端面試的套路。以下是自己整理的面試題匯總,不敢藏私,統統貢獻出來。 面試的公司分...
閱讀 1995·2021-11-15 18:09
閱讀 889·2021-09-06 15:13
閱讀 2636·2021-08-23 09:43
閱讀 2016·2019-08-30 15:54
閱讀 2209·2019-08-30 13:56
閱讀 2476·2019-08-26 11:31
閱讀 3070·2019-08-26 10:56
閱讀 685·2019-08-26 10:28