问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vite + Vue3 + Axios 请求 Node.js 接口一直报404是什么问题？应该怎么解决？

头像
瓶子
    111
    新手上路，请多包涵

    vite+vue3+js,请求node接口一直404,代理也写了,!image.png

    vite代理axios请求接口路由路由控制层

    vitevue3axiosnode.js
    阅读 2.8k
    avatarAI BotBETA

    首先，让我们确定问题的原因，然后提供解决方案。

    问题原因：

    1. Vite 代理配置问题：确保你的 Vite 配置中的代理设置正确。
    2. Axios 请求 URL 问题：可能是 Axios 请求的 URL 不正确或者不完整。
    3. Node.js 接口路由问题：确保你的 Node.js 接口路由设置正确，并且确实在指定的路径上。
    4. 跨域问题：如果你的前端和后端在不同的域上，你可能需要处理跨域请求。
    5. 其他可能的配置或代码问题：可能还有其他不易察觉的问题导致这个错误。

    解决方案：

    1. 检查 Vite 代理配置

    在 vite.config.js 中，确保代理配置如下：

    export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://your-node-server-url',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

    注意：/api 是你希望代理的前端路径，your-node-server-url 是你的 Node.js 服务器 URL。

    1. 检查 Axios 请求 URL

    确保你在 Axios 中请求的 URL 是正确的，并且与你的 Node.js 接口匹配。

    axios.get('/api/your-endpoint')
  .then(response => {
    // handle response
  })
  .catch(error => {
    console.error(error);
  });
    1. 检查 Node.js 接口路由

    在 Node.js 应用中，确保你的路由设置正确，并且确实在监听指定的路径。例如：

    app.get('/your-endpoint', (req, res) => {
  // your code here
});
    1. 处理跨域请求

    如果你的前端和后端在不同的域上，你需要在 Node.js 服务器端设置 CORS (Cross-Origin Resource Sharing)。你可以使用 cors 中间件来实现这个功能。首先安装 cors：

    npm install cors --save

    然后在你的 Node.js 应用中使用它：

    const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // Enable CORS for all routes by default. You can also use app.use(cors({ ... })) to enable CORS for specific routes.
    1. 检查其他配置和代码

    仔细检查你的其他配置和代码，确保没有其他可能导致 404 的问题。

    1. 查看控制台和网络日志

    查看浏览器控制台和网络日志，看是否有其他相关的错误或提示，这可能会给你提供更多线索。

    1. 更新依赖和框架版本

    确保你使用的是 Vite, Vue3, Axios 和 Node.js 的最新稳定版本。有时候，问题可能是由于库或框架的旧版本引起的，而更新到最新版本可能会解决这个问题。

    3 个回答
    得票最新
    头像
    凌览
      219626

      应该是代理配置写错了

      头像
      一个凹
        259215

        你这个问题我也遇到过，似乎无论如何设置webpack的代理都会无法代理。通过看你报错404那个URL就证明你的代理失败了，它访问的是你前端项目的URL了，但是你的前端项目中并没有这个接口。

        我当时搞了一下没搞好，所以我直接在nodejs中设置允许跨域了。可以参考

        app.all("*",function(req,res,next){   
 if( req.headers.origin.toLowerCase() == "http://www.zhangpeiyue.com"
        || req.headers.origin.toLowerCase() =="http://127.0.0.1" ) {        
        //设置允许跨域的域名，*代表允许任意域名跨域
        res.header("Access-Control-Allow-Origin", req.headers.origin);
    }    //允许的header类型
    res.header("Access-Control-Allow-Headers", "content-type");    
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");    
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //让options尝试请求快速结束
    else
        next();    
})

        原生不行就用插件把
        那就别用原生的允许跨域，你是express还是koa？express的话有一个cors跨域插件，用法如下：

        app.use(
  cors({
    origin: function (ctx) {
     //允许多个域名跨域
      const whiteList = [
        "http://localhost:8080",
      ]; //可跨域白名单
      let url = ctx.header.referer.substr(0, ctx.header.referer.length - 1);
      if (whiteList.includes(url)) {
        return url; //注意，这里域名末尾不能带/，否则不成功，所以在之前我把/通过substr干掉了
      }
    },
    maxAge: 5, //指定本次预检请求的有效期，单位为秒。
    credentials: true, //是否允许发送Cookie
    allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], //设置所允许的HTTP请求方法
    allowHeaders: ["Content-Type", "Authorization", "Accept"], //设置服务器支持的所有头信息字段
    exposeHeaders: ["WWW-Authenticate", "Server-Authorization"], //设置获取其他自定义字段
  })
);

        如果你是koa的话也有一个插件 koa-cors

        头像
        是ta就是他
          6614

          运行dev命令的时候加上--debug，确认下代理到哪个地方了

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题