时间戳

首页 > 解决方案 > React 中 axios 的未知“网络错误”

javascript - React 中 axios 的未知“网络错误”

问题描述

我们正在 React 16.13 中创建一个基本的自动化应用程序，使用 axios 0.18.1 调用不同的 API。我遇到了通常的“网络错误”异常，但我找不到任何可能导致它的信息。这是我所知道的：

const instance = axios.create({
    baseURL: SERVER,
    headers: {
     'Authorization': "Bearer " + TOKEN
    },
    adapter: require('axios/lib/adapters/http')
})
let request = instance.get(PTV_FARMS_PATH);
return expect(request).resolves.toHaveProperty('data');

这是我拨打电话的方式（删除逻辑代码）：

const InventairePTV = () => {
    const token = localStorage.getItem('adal.idtoken');
    const PTV_SERVER = "https://my-url.com"
    const PTV_FARMS_PATH = "/rds/farms"
    const instance = axios.create({
        baseURL: PTV_SERVER,
        headers: {
            'Authorization': "Bearer " + token 
        }
    });

    useEffect(() => {
        const fetchData = async () =>{
            await instance.get(PTV_FARMS_PATH).then((response)=>{
                setData(response.data);
                console.log(data);
            }).catch((error)=>{
                if (error.request) {
                    // The request was made but no response was received
                    console.log(error.request);
                    console.log('Error', error);
                    console.log('Message',error.message);
                    console.log('Config',error.config);
                } else {
                    // Something happened in setting up the request that triggered an Error
                    console.log('Error', error.message);
                }
            });
        }
        fetchData();
    },[instance]);

    return ()
};

我是否放入adapter: require('axios/lib/adapters/http')实例的配置似乎没有什么区别。

我总是在浏览器的控制台中得到这个（Fedora 的 firefox 70.0）

Error Error: "Network Error"
    createError http://localhost:8080/static/js/1.chunk.js:195013
    handleError http://localhost:8080/static/js/1.chunk.js:194564

error.config日志也不是很有帮助。tcpdump 显示服务器和客户端确实在通信，但我无法看到发生了什么。我确实在它们之间捕获了 9 个数据包。

我可以从这里去哪里？可能是什么问题？我可以查找更多信息吗？

标签： javascriptasp.netreactjsaxios

解决方案

问题出在 ASP.NET 后端。我们需要像这样启用 CORS 支持：

public static void Register(HttpConfiguration config)
{
    var corsAttr = new EnableCorsAttribute("http://example.com", "*", "*");
    config.EnableCors(corsAttr);
}

确保在您的后端启用了 CORS。它似乎是由浏览器强制执行的（因为我可以使用 Jest 进行调用，但不能在 Firefox 中进行调用）。该网站展示了为不同后端启用 cors 支持的不同方法。它似乎具有多重安全隐患，因此我可能会对此进行更多研究，但这对于可能遇到此问题的任何人来说都是一个很好的开始。

推荐阅读