在Vercel上部署Express服务器时遇到问题[404页面未找到]。

Question

我尝试将我的Express服务器部署在Vercel上，以解决前端代码中的CORS问题。但是当我进入部署的页面时，出现了404错误。但是在本地主机上尝试时，一切都很顺利。请注意，保留HTML标签，不做任何修改。

// vercel.json       
{
      "version": 2,
      "builds": [
        {
          "src": "./index.js",
          "use": "@vercel/node"
        }
      ],
      "routes": [
        {
          "src": "/(.*)",
          "dest": "/"
        }
      ],
      "rewrites": [{ "source": "/api/(.*)", "destination": "/api" }]
    }

//index.js
const express = require("express");
const cors = require("cors");
const axios = require("axios");

const app = express();

const PORT = process.env.PORT || 3000;
require("dotenv").config();

let corsOptions = {
  origin: ["http://localhost:3000", "https://humanscape-team5a.netlify.app"],
};

app.use(cors(corsOptions));

app.get("/", (req, res) => {
  const textQuery = req.query.searchText;
  const numOfRowsQuery = req.query.numOfRows;

  axios
    .get(
      "http://apis.data.go.kr/B551182/diseaseInfoService/getDissNameCodeList",
      {
        params: {
          sickType: 1,
          medTp: 2,
          diseaseType: "SICK_NM",
          searchText: textQuery,
          ServiceKey: process.env.KEY,
          numOfRows: numOfRowsQuery,
          _type: "json",
        },
      }
    )
    .then(response => res.send(response.data));
});

app.listen(PORT, () => {
  console.log(`Server running on ${PORT}`);
});

由于它在本地主机上运行正常，我猜测这可能是vercel设置的问题。有什么想法吗？

- easeurmind

---

你最终解决了这个问题吗？ - Kyle Pendergast

Answer 1

不确定您是否仍在寻找解决方案，但我经过一些重大的试错后解决了这个问题。

首先，Vercel似乎需要一个带有/api文件夹和一个index.js文件才能正常工作。最初，我感到困惑，因为我的index.js文件也用于在本地工作时启动我的服务器。 Vercel基本上取代了本地服务器文件的位置。您仍应该保留此文件进行本地测试，但在使用Vercel时可以忽略它。

在您的/api/index.js文件中，您将存储您的路由。

./api/index.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('../routes/index');

var app = express();

const whitelist = [
  '*'
];

app.use((req, res, next) => {
  const origin = req.get('referer');
  const isWhitelisted = whitelist.find((w) => origin && origin.includes(w));
  if (isWhitelisted) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type,Authorization');
    res.setHeader('Access-Control-Allow-Credentials', true);
  }
  // Pass to next layer of middleware
  if (req.method === 'OPTIONS') res.sendStatus(200);
  else next();
});

const setContext = (req, res, next) => {
  if (!req.context) req.context = {};
  next();
};
app.use(setContext);

app.use('/', indexRouter);

module.exports = app;

我的 vercel.json 文件是...

// vercel.json

{
   "version": 2,
   "builds": [
    {
        "src": "./index.js",
        "use": "@vercel/node"
    }
   ],
   "routes": [
    {
        "src": "/(.*)",
        "dest": "/"
    }
   ]
}

不确定这是否有帮助，但对我来说有效。重要的是将你的index.js路由文件嵌套在一个api文件夹中。

- Kyle Pendergast

---

谢谢你的回答，我已经困扰了一整天。 - undefined

Answer 2

文档中提到，node.js应用程序需要在项目根目录下有一个api/文件夹。这意味着你的index.js必须在这个文件夹里面。 重要提示：如果你的索引命名为app.js，必须将其重命名为index.js

链接说：“要部署无服务器Node.js API，请在项目根目录下的/api目录中创建一个.js文件中的函数：”

- Glenn Andrés P. Rosario

Answer 3

我原本有一个名为app.js的文件，而不是index.js

首先，我将这个app.js重命名为index.js ==> 这样更改对我起了作用。

package.json

...
  "scripts": {
    "start": "node index.js",
    "server": "nodemon index.js"
  },
...

vercel.json

{
    "version": 2,
    "builds": [
        {
            "src": "./index.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "/"
        }
    ]
}

- ChethiyaKD

Answer 4

尝试为节点应用程序部署进行渲染可能会有所帮助，这对我有效。

注意：我尝试了很多次在Vercel上部署我们的节点表达式应用程序，但它没有成功。在Vercel不可能运行服务器Web应用程序。Vercel是一个用于静态前端和无服务器函数的云平台。

- Harendra Singh