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

【问题标题】：Axios fetching data from file not working after deploying to github pages部署到 github 页面后，Axios 从文件中获取数据不起作用
【发布时间】：2018-07-26 17:04:59
【问题描述】：

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

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

我正在尝试从 Text.js 组件中的 targetData.md 读取内容，但它似乎无法正常工作，因为在部署到 Github Pages 后，我在控制台中收到了 Request failed with status code 404。我已经安装了 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 页面后工作？

【问题讨论】：

标签： javascript reactjs axios

【解决方案1】：

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

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

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

【讨论】：