使用axios（vue cli）的静态JSON保持404错误

Question

我开始了一个简单的Vue项目，并遇到了静态数据的第一个问题。我有一个json文件tours.json，该文件通过axios GET请求不断收到404错误。

    <script>
    import axios from 'axios';
    const tours = 'http://localhost:8080/server/tours.json';
    export default {
        name: "TourInformations",
        data() {
            return {
                tourInformations: ''
            };
        },
        methods: {},
        created() {
            axios.get(tours).then(res => {
                console.log(res);
            }).catch(err => console.log(err))

        }  
    };
    </script>

我尝试做的第一件事就是更改json文件的路径。没帮助我尝试使用相对路径，将localhost:8080与http://分别指定为https://。

控制台常说：

GET http://localhost:8080/server/tours.json 404 (Not Found)

Error: Request failed with status code 404
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:59)

谢谢您的帮助！

编辑：奇怪的是，当我使用jsonplaceholder之类的外部API或其他具有相同代码的API时，得到响应。为什么是这样？将我的地址更改为https：//会显示CORS错误。我认为我不能以更好的方式加入CORS。我糊涂了。尤其是作为一个初学者，我无法理解为什么无法使用指向本地JSON文件的简单路径，而无法访问安全的外部API的路径。

Edit2：将我的/server/tours.json放入public文件夹现在可以使用。数据显示在console中。现在，这是我的json文件存储的位置：'http://localhost:8080/public/server/tours.json。一切都很好。

但是当我将json文件移到其他每个文件夹中并相应地更改路由时。无论如何尝试将路由调整为json文件的新位置都没有关系，它始终显示404错误。例如：如果将/server/tours.json移到src目录中，请更改我的axios路径fromhttp://localhost:8080/server/tours.jsonto http://localhost:8080/src/server/tours.json，显示404 (GET http://localhost:8080/src/server/tours.json 404 (Not Found)）。这样，到我文件的路由应该是正确的。出现404的相对路径也类似../server/tours.json。 （我上面的axios代码放在我要根据json的位置更改路径的组件中。）>

这是我的（简化的）文件结构：

    root
    ├── public
    ├────── favicon.ico
    ├────── index.html
    ├────── server
    ├──────────tours.json
    ├── src
    ├────── assets
    ├────── components
    ├───────── Tours.vue ###My axios code in here
    ├──────────── ...
    ├────── App.vue
    ├────── main.js
    ...
具有以上文件结构的路由http://localhost:8080/public/server/tours.json有效。好的。

这是显示404 Error的文件结构和路由。http://localhost:8080/src/server/tours.json

    root
    ├── public
    ├────── favicon.ico
    ├────── index.html
    ├── src
    ├───────server
    ├──────────tours.json
    ├────── assets
    ├────── components
    ├───────── Tours.vue ###My axios code in here
    ├──────────── ...
    ├────── App.vue
    ├────── main.js
    ...
因此json中的public有效，而外部API也适用。 axios代码段正确。这是关于致敬的权利吗？我尝试（感觉）了所有可能导致问题的可能途径。我很困惑。

我想念什么？这个话题应该短得多。所以，这里有些我想念的东西。否则，我无法解释为什么像正确的文件路由这样的简单事情似乎如此令人困惑。

我开始了一个简单的Vue项目，并遇到了静态数据的第一个问题。我有一个json文件tour.json，它通过axios GET请求不断收到404错误。

我认为问题很简单，您将文件放置在文件系统上的错误位置。

假设您正在使用Vue CLI，并且需要URL：

http：// localhost：8080 / server / tours.json
然后您应该将文件放在路径：

project-root / public / server / tours.json
供参考，index.html通常位于路径：

project-root / public / index.html
官方文档：

https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

[还有其他方法可以使用服务器的自定义配置来实现类似的效果，但是将静态资产放入public文件夹应该是开箱即用的。

我认为这里的主要问题是您拥有.json文件，但是您需要一个服务器才能实际发送回对GET http请求的响应，在此响应中您将拥有json数据。

总之，axios将创建一个http请求，在本例中为GET请求，您需要另一个软件来响应此http协议，该响应将包含json数据，标头等。

我建议为此考虑使用类似Express框架的东西。

Answer 1

我认为问题很简单，您将文件放置在文件系统上的错误位置。

Answer 2

我认为这里的主要问题是您拥有.json文件，但是您需要一个服务器才能实际发送回对GET http请求的响应，在此响应中您将拥有json数据。