【发布时间】：2020-03-15 13:41:05
【问题描述】：
我开始了一个简单的 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 路径从 http://localhost:8080/server/tours.json 更改为 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
...
所以public 中的json 有效，外部API 有效。 axios sn -p 是正确的。是关于绳索的吧？我尝试了（感觉像）所有可能导致问题的路线。我很困惑。
我想念什么？这个话题应该短得多。所以，我在这里想念一些东西。否则我无法解释为什么像正确的文件路径这样简单的事情似乎如此令人困惑。
显然不是路线错了。即使我将json 移动到root 并将路径更改为http://localhost:8080/tours.json，它也会显示404。
【问题讨论】：
-
localhost:8080是您的 Vue 开发服务器的地址还是其他服务器？相对于您的 Vue 文件，您将文件tours.json放在文件系统的哪个位置？如果您直接在 Web 浏览器中打开 URL，直接在地址栏中输入 URL，会发生什么情况？直到您可以正常工作，您才能编写合适的代码从 UI 中检索它。从表面上看，问题似乎是文件系统上文件的位置与您用来访问它的 URL 不匹配。 -
这是我的Vue开发服务器的地址。我的
tours.json在单独的server文件夹中的src之外。如果我在浏览器中输入 URL，它会像往常一样将我带到我的 Vue 应用程序。
标签： json vue.js axios command-line-interface http-status-code-404