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)在catch块中.但是,在Chrome的网络标签中,状态代码为200,但是当我点击此请求的响应/预览标签时,没有数据.如果我点击继续,我实际上会按预期在响应/预览选项卡中获取令牌和其他数据,但此时它已经到达了catch块,因此不会点击then块.

我甚至调试了后端,它没有发回错误,所以我认为这是一个前端错误.有谁知道是什么原因造成的？

编辑:

只是为了添加更多细节,如果我将请求更改为使用fetch而不是axios,我会收到不同的错误TypeError: Failed to fetch.用于呼叫的代码是:

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

此外,这是邮递员请求正常工作的示例:

Answer 1

终于找到了我的答案。事实证明，我没有在端点的 WebAPI 后端中启用 CORS /token。我能够解决此问题的方法是通过MyProject\Providers\ApplicationOAuthProvider.cs将行添加context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });到名为 的方法的顶部来启用 CORS GrantResourceOwnerCredentials。我确实认为有更好的方法来为整个项目启用 CORS，接下来我将研究这些方法！

从这里获得了有关如何启用 CORS 的一些帮助：Enable CORS for Web Api 2 and OWIN tokenauthentication