Question

我在Heroku中部署了一个应用程序，该应用程序具有用Nest.js，Vue.js UI和PostgreSQL数据库编写的API。

这些是我构建和部署所有内容的步骤。

在我的vue目录中，我运行了vue-cli-service build
在vue.config.js中，我的proxy和outputDir指定如下：

outputDir: path.resolve(__dirname, "../ea-blog-api/public"),
  devServer: {
    proxy: "https://game-bible.herokuapp.com"
  },

导航到ea-blog-api的文件结构如下

public文件夹包含vue文件的编译输出。.到目前为止，很好
接下来我提交并运行git push master heroku
我的package.json脚本看起来像

  "engines": {
    "node": "13.10.x"
  },
  "scripts": {
    "start": "node dist/main.js",
    "prestart:prod": "yarn tsc",
    "build": "rimraf dist && npm run rebuild && tsc -p tsconfig.build.json",
    "rebuild": "nest build",
    "postinstall": "tsc",

我的Procfile看起来像

web: npm run start

此时，heroku部署了该应用程序，我可以通过浏览器进行访问。当我去注册或登录时，页面呈现，但是当我在输入字段中输入详细信息并单击提交时，我总是得到

Error: TypeError: Cannot read property 'data' of undefined

这来自Axios拦截器-这是代码

Login.ts

 async onClickLogin() {
    const userToLogin = {
      username: this.loginForm.username,
      password: this.loginForm.password
    };

    try {
      await UsersModule.LOGIN_USER(userToLogin);
      this.onClickLoginSuccess();
    } catch (error) {
      throw new Error(error);
    }
  }

UsersLoginModule

@Action({ rawError: true })
  async [LOGIN_USER](params: UserSubmitLogin) {
    const response: any = await login(params);
    if (typeof response !== "undefined") {
      const { accessToken, username, name, uid } = response;

      setToken(accessToken);
      this.SET_UID(uid);
      this.SET_TOKEN(accessToken);
      this.SET_USERNAME(username);
      this.SET_NAME(name);
    }
  }

登录功能

export const login = (data: UserSubmitLogin) => {
  console.log('users.api - login - data', data) // this logs what I type into the form
  return request({
    url: "/auth/login",
    method: "post",
    data
  });
};

axios请求拦截器 我认为问题出在这里，但我不确定如何调试它

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 5000
});

// Request interceptors
service.interceptors.request.use(
  config => {

    // Add X-Access-Token header to every request, you can add other custom headers here
    if (UsersModule.token) {
      config.headers["X-Access-Token"] = UsersModule.token;
    }

    logger.request({
      method: config.method,
      url: config.url
    });


    return config;
  },
  error => {
    Promise.reject(error);
  }
);

// Response interceptors
service.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    const { response } = error;
    logger.error(response.data.message, response);
    Message({
      message: `Error: ${response.data.message}`,
      type: "error",
      duration: 5 * 1000
    });
    return Promise.reject({ ...error });
  }
);

export default service;

如果我使用heroku网址针对Postman测试了我的API，它会从数据库返回正确的结果，我可以通过观看heroku logs --tail

进行验证

但是，通过UI进行相同的操作，绝对没有heroku logs来的日志

我还验证了我已编译的Vue代码包含正确的Heroku主机网址。

目前还不确定该怎么办..任何建议将不胜感激！

无法在生产的Heroku应用上发送API请求

0 个答案: