Next.js中PrismaClient无法在浏览器运行错误的解决方案

核心原因 #

Prisma Client是专为Node.js后端环境开发的数据库操作工具，它依赖Node.js的文件系统、网络等专属API，同时直接在浏览器中使用会泄露数据库连接凭证（如数据库URL），因此官方限制了它在浏览器环境的运行。

具体解决方案 #

• 后端创建API接口：在Node.js后端代码中编写接口，通过Prisma Client查询数据库里的新闻ID，再将结果返回给前端。
  示例后端代码（Express框架）：

  const express = require('express');
  const { PrismaClient } = require('@prisma/client');
  const prisma = new PrismaClient();
  const app = express();
  
  app.get('/api/news-ids', async (req, res) => {
    try {
      const news = await prisma.news.findMany({
        select: { id: true }
      });
      res.json(news.map(item => item.id));
    } catch (error) {
      res.status(500).json({ error: '获取新闻ID失败' });
    }
  });
  
  app.listen(3001, () => {
    console.log('后端服务运行在http://localhost:3001');
  });
  

• 前端调用后端接口：在浏览器端的前端代码里，用fetch或Axios等工具调用后端接口，拿到新闻ID后再打印到控制台。
  示例前端代码：

  fetch('http://localhost:3001/api/news-ids')
    .then(res => res.json())
    .then(ids => {
      console.log('所有新闻ID:', ids);
    })
    .catch(err => console.error('请求失败:', err));
  

• 处理跨域问题：如果前端和后端运行在不同端口或域名下，需在后端配置跨域支持，比如在Express中使用cors中间件：

  const cors = require('cors');
  app.use(cors());
  

内容的提问来源于stack exchange，提问作者JustAkid