Vercel.com 托管：开发和生产 URL

Question

我的 server.js 文件有以下代码

const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const cors = require('cors');
//const fs = require('fs');
//const fileStore = require('session-file-store')(session);
const serveStatic = require('serve-static');
const history = require('connect-history-api-fallback');
const passport = require('passport');
const authenticate = require('./authenticate');
const config = require('./config');

const router = express.Router();
const usersRouter = require('./routes/users');
const poemsRouter = require('./routes/poems');

const app = express();
app.use(history());
app.use(serveStatic(__dirname + "/dist"));
app.use(bodyParser.json());
app.use(morgan('combined'));
app.use(cors());
app.use(passport.initialize());

//connect to mongodb dova
const mongoose = require('mongoose');
const client = mongoose.connect(config.mongoUrl, { 
        useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false 
    }, ()=>{
    console.log('DOVA connection has been made');
})
.catch(err => {
    console.error('App starting error:', err.stack);
    process.exit(1);
});

router.get('/', (req, res)=>{
    res.json({ message: 'API Initialized!'});
});

const port = process.env.API_PORT || 8081;
app.use('/', router);
app.use('/users', usersRouter);
app.use('/poems', poemsRouter);

app.use(express.static(path.join(__dirname, 'public')));

// catch 404 and forward to error handler
app.use((req, res, next)=>{
  next(createError(404));
});

// error handler
app.use((err, req, res, next)=>{
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

var server = app.listen(port, ()=>{//221020 pre added 'var server = '
    console.log(`api running on port ${port}`);
});

module.exports = server; //221020 added this line

然后我的vue>views>Poems.vue在它的脚本中有这部分代码

fetchPoems(){
        return axios({
          method: 'get',
          **url: 'http://localhost:8081/poems',**
          headers: {
            'Content-Type': 'application/json',
          },
        })
        .then((res)=>{
          this.poems = res.data.poems;
        })
        .catch((err)=>{
          console.log(err);
        });
      }

当我在本地使用“npm run build”和“serve -s dist”来预览生产级静态应用程序时，一切正常，即从我的 MongoDB Atlas 数据库中获取“诗歌”并提供服务。但是，在 vercel.com 托管平台上，使用相同的配置，不会获取任何“诗歌”。

我首先想到我需要从 vue > views > Poems.vue fetchPoems() 函数中删除字符串 'http://localhost:8081/'， 但仍然没有加载诗歌。

PS 辅助：我要疯了

简而言之，我如何处理上面给出的 MEVN 堆栈上的开发和生产级路由。

Answer 1

在 Poems.vue 中，url 应该是 /poems 而不是 http://localhost:8081/poems。

浏览器将自动使用正确的域。需要在开头加上/，表示路径是绝对的，而不是相对于当前页面。

完整代码：

fetchPoems(){
        return axios({
          method: 'get',
          url: '/poems',
          headers: {
            'Content-Type': 'application/json',
          },
        })
        .then((res)=>{
          this.poems = res.data.poems;
        })
        .catch((err)=>{
          console.log(err);
        });
      }