React Axios - C＃WebAPI請求令牌失敗，沒有服務器錯誤

Question

我有以下代碼：

var qs = require('qs');

const ROOT_URL = 'http://localhost:56765/';
const data = qs.stringify({ username, password, grant_type: 'password' });
axios.post(`${ROOT_URL}token`, data)
.then(response => {
    debugger;
    dispatch(authUser());
    localStorage.setItem('token', response.data.token);
})
.catch((error) => {
    debugger;
    dispatch(authError(error.response));
});

當我運行此代碼時，我點擊調試器並且Error: Network Error at createError (http://localhost:3000/static/js/bundle.js:2188:15) at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:1724:14)出現Error: Network Error at createError (http://localhost:3000/static/js/bundle.js:2188:15) at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:1724:14)在catch塊中。 但是，在Chrome的網絡標簽中，狀態代碼為200，但是當我點擊此請求的響應/預覽標簽時，沒有數據。 如果我點擊繼續，我實際上會按預期在響應/預覽選項卡中獲取令牌和其他數據，但此時它已經到達了catch塊，因此不會點擊then塊。

我甚至調試了后端，它沒有發回錯誤，所以我認為這是一個前端錯誤。 有誰知道是什么原因造成的？

編輯：

只是為了添加更多細節，如果我將請求更改為使用fetch而不是axios，我會收到一個不同的錯誤TypeError: Failed to fetch 。 用於呼叫的代碼是：

fetch(`${ROOT_URL}token`, {
    method: 'POST',
    body: data
})

此外，這是郵遞員請求正常工作的示例：

Answer 1

終於找到了答案。 事實證明，我沒有在我的WebAPI后端為/token端點啟用CORS。 我能夠解決這個問題的方法是在MyProject\\Providers\\ApplicationOAuthProvider.cs啟用CORS，方法是添加行context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" }); 到名為GrantResourceOwnerCredentials的方法的頂部。 我認為有更好的方法為整個項目啟用CORS，我將在下面介紹！

從這里獲得了一些關於如何啟用CORS的幫助： 為Web Api 2和OWIN令牌認證啟用CORS

Answer 2

它應該通過添加content-type來獲取fetch：

fetch(`${ROOT_URL}token`, {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
    body: data
})

您也可以在axios中嘗試這個，但它似乎與axios bug有關 ，您可以嘗試添加params屬性：

axios.post(`${ROOT_URL}token`, data, params: data)