axios请求报错 404，如何解决？

Question

看了半天看不出问题 端口和拼写应该都没错 实在看不出来问题了！aa

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

您想要解决的问题

您想要解决的问题是在使用axios库进行HTTP请求时遇到的404错误，您希望找到问题的原因并解决它。

图片内容

1. 图片1：显示了一个JavaScript函数getWeather()，该函数使用axios发起了一个GET请求到/api/weather/city/101280101。同时，代码中存在一些注释和变量声明。
2. 图片2：显示了浏览器控制台的错误信息，提示请求失败，状态码为404，错误类型为AxiosError，错误消息为Request failed with status code 404。
3. 图片3：显示了一个JSON格式的响应，其中包含了天气信息，如城市、日期、温度、湿度等，状态码为200，表明请求成功。
4. 图片4：显示了webpack开发服务器的配置，其中有一个代理配置proxy: { 'api': (target: 'http://t.weather.itboy.net/', changeorigin: true, ...)}。

问题出现原因

根据您提供的信息，问题可能出现在以下几个方面：

• 请求地址错误：图片1中的请求地址/api/weather/city/101280101可能是相对于服务器的路径，而不是完整的URL。
• 代理配置问题：图片4中的代理配置可能是为了解决跨域问题，但如果代理服务器没有正确配置，也可能导致404错误。
• 服务器问题：服务器可能没有正确响应请求，或者请求的资源不存在。

问题解决方案

1. 检查请求URL：确保请求的URL是正确的，如果/api/weather/city/101280101是相对于服务器的路径，需要将其更改为完整的URL。
2. 检查代理配置：确保webpack的代理配置正确，并且服务器能够正确处理这些代理请求。
3. 检查服务器响应：确认服务器是否能够正确响应请求，并且请求的资源确实存在。

提供代码

由于图片中没有提供完整的代码，我只能提供一些修改建议：

• 确保axios请求的URL是正确的，如果需要使用代理，可以修改请求URL为代理服务器的路径。
• 如果图片4中的代理配置是必要的，确保它被正确地应用在webpack配置中。

代码运行方式

• 您需要一个Node.js环境来运行webpack开发服务器。
• 在项目的根目录下运行npm run serve或yarn serve来启动开发服务器。

代码预期运行结果

如果问题得到解决，axios请求将成功，控制台将不再显示404错误，而是显示请求成功的响应。

推荐相关链接

• Axios官方文档
• Vue.js官方文档
• Webpack官方文档
• 跨域资源共享（CORS）

请尝试上述建议，并根据实际情况调整您的代码和配置。如果问题仍然存在，可能需要进一步检查服务器端的配置或与服务器管理员联系。