Can't send API requests on production heroku app

问题

I deployed an app in Heroku which has an API written in Nest.js, Vue.js UI and PostgreSQL database.

These are the steps I took to build and deploy everything.

In my vue directory I ran vue-cli-service build
in vue.config.js I specified my proxy and outputDir as follows:

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

navigating to ea-blog-api my file structure looks like so

public folder contains the compiled output of the vue files..so far so good
next I commit and run git push master heroku
my package.json scripts look like so

  "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",

my Procfile looks like

web: npm run start

At this point heroku deploys the app and I can access via the browser. When I go to register or login the page renders but when I enter the details into the input fields and click submit I always get

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

This is coming form the Axios interceptor - here is the code

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);
    }
  }

login function

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 request interceptor I think the problem is here but I am not sure how I can debug it

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;

If I test my API against Postman with the heroku url, it returns the correct result from the database and I can verify this by watching heroku logs --tail

However, doing the same thing through the UI, there is absolutely no logs coming from the heroku logs

I have also verified that my compiled Vue code contains the correct Heroku host url.

Not sure what to do at this point.. any advice would be appreciated!

来源：https://stackoverflow.com/questions/60859072/cant-send-api-requests-on-production-heroku-app

标签

node.js