2017-06-21 76 views
1

我採用了棱角分明的1.x如下來發布驗證請求,谷歌的重新驗證碼:重新驗證碼角CORS問題

var post_data = { //prepare payload for request 
    'secret':'xxxxx', 
    'response':fields.myRecaptchaResponse 
}; 

$http.post('https://www.google.com/recaptcha/api/siteverify', post_data) 

在我的控制檯我可以看到以下錯誤:

XMLHttpRequest無法加載https://www.google.com/recaptcha/api/siteverify。對預檢請求的響應不會通過訪問控制檢查:請求的資源上不存在「訪問控制 - 允許來源」標頭。因此不允許訪問原產地'http://igs.dev'。響應有HTTP狀態代碼405.

我已閱讀Stackoverflow上的多個答案,大多數似乎建議向Chrome添加插件,但這不是我的用戶誰將使用重新驗證碼來驗證聯繫表。

這是我的服務器的錯誤配置或爲我的角度腳本失去了一些東西?我已經確保我的域名是在我的重新驗證碼帳戶中配置的。

回答

4

ReCaptcha在服務器端進行驗證,而不是在客戶端進行驗證。 CORS錯誤是由於ReCaptcha API不適用於瀏覽器。

您需要將您的recaptcha數據發送到您的API /服務器,然後通過向ReCaptcha API發送請求來驗證它是否正確。當服務器向對方發送HTTP請求時,沒有CORS限制。

看到這個Tuts tutorial上執行數據和流量是如何工作的

+0

當然是有道理的,用於驗證的請求需要來自服務器而不是客戶端。現在工作很好。 –

2

終點https://www.google.com/recaptcha/api/siteverify是服務器端驗證的一部分,而不是在客戶端。你應該從你的服務器,而不是你的客戶端(Angular 1.X)打這個端點。

所以流可能看起來像這樣:

在您的客戶端(角1.X),你會被加載在你的HTML重新驗證碼插件將執行驗證,並在存儲的哈希值隱藏的輸入字段將在用戶提交表單時與其他表單詳細信息一起發送到您的服務器。現在在您的服務器端,您將打到該端點以驗證驗證是否成功。

而且,在任何情況下,你應該是在客戶端存儲你的祕密。它應該始終在服務器端進行維護以實現服務器到服務器的通信目的。

閱讀文檔here