令牌請求keycloak背後泊塢窗，捲曲的作品，reactjs不

Question

以下情況：

Keycloak服務器設置與泊塢窗撰寫（http://127.0.0.1:8083）

當我這樣做：

curl --data "grant_type=password&client_id=account&username=dr&password=dr" http://127.0.0.1:8083/auth/realms/xxx/protocol/openid-connect/token 

它作品。

然後我嘗試做react.js同樣具有如下：

axios.post(kc.authServerUrl + "/realms/xxx/protocol/openid-connect/token", { 
    grant_type: 'password', 
    client_id: 'account', 
    username: 'dr', 
    password: 'dr' 
} 
) 
.then(function (response) { 
    console.log(response); 
}) 
.catch(function (error) { 
    console.log(error); 
}); 

而且這是行不通的。我得到如下：

圖片的標題說明： 在keycloak我已經設置允許從原點* 來也怪：我看到用戶已開通從IP 172.17.0.1會話（這是我猜的捲曲引起）

問題：如何使它從react.js工作？ 問題2：爲什麼它從curl而不是axios工作？

Answer 1

好吧，這似乎工作：

fetch(kc.authServerUrl + "/realms/xxx/protocol/openid-connect/token", { 
     method: 'POST', 
     mode: 'no-cors', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/x-www-form-urlencoded', 
     }, 
     body: 'grant_type=password&client_id=account&username=dr&password=dr' 
    }); 

Answer 2

找到一個解決辦法，如果有人像我一樣，要堅持使用Axios公司。

正如在axios wiki中所說的，默認情況下，axios會將JavaScript對象序列化爲JSON。所以在發送數據application/x-www-form-urlencoded你可以這樣做：

var params = new URLSearchParams(); 

params.append('grant_type', 'password'); 
params.append('client_id', 'account'); 
params.append('username', 'dr'); 
params.append('password', 'dr'); 

axios.post('/realms/xxx/protocol/openid-connect/token', params); 

，或者你可以用QS庫做到這一點：

import qs from 'querystring'; 

let data = { 
    grant_type: 'password', 
    client_id: 'account', 
    username: 'dr', 
    password: 'dr' 
}; 

axios.post('/reals/xxx/protocol/openid-connect/token', qs.stringify(data));