javascript - 部署到 github 页面后，Axios 从文件中获取数据不起作用

Question

我正在使用 Webpack 编写一个反应应用程序，而不是创建反应应用程序。这是一个示例项目文件夹结构：

data
    targetData.md
src
    component
        Text.js
    container
        App.js
    index.js
index.html

我正在尝试从组件中读取内容，targetData.md但Text.js它似乎没有工作，因为我Request failed with status code 404在部署到 Github Pages 后在控制台中得到了一个。我已经安装了 gh-pages，能够正确部署，并且所有内容都在呈现，除了我尝试从文件中读取的内容无法使用以下代码工作：

axios.get('https://username.github.io/data/' + filename)
    .then( response => {
        this.setState({
            ...this.state,
                data: response.data
            });
        })
        .catch(function (error) {
            console.log(error);
    });

渲染它：

 render() {
        return(
            <div>
                 {this.state.data? (<div className={styles.content}>{this.state.data}<div/>) : null}
            </div>
    )
}

当我在开发模式下使用相对路径时它可以工作，但是当我将它部署到 GitHub 页面时，我注意到找不到 404，所以我想如果我输入域 URL 它应该可以工作，但它没有。axios.get(????)部署到 GitHub 页面后，路径名应该是什么？

标签： javascriptreactjsaxios

Answer 1

GitHub 在他们的视图中显示文件。如果您想检索内容，您需要的是文件的原始版本。

1. 访问您的 GitHub 存储库并导航到targetData.md.
2. 在右侧，您会看到一个按钮Raw。
3. 单击它，将显示文件的内容。
4. axios.get()在您的通话中使用该链接。

url 将包含原始单词，看起来像这样
https://raw.githubusercontent.com/[your-username]/[your-application]/gh-pages/data/targetData.md。