Не могу отправлять запросы API на приложение для производства герою - PullRequest
Новая
       47

Не могу отправлять запросы API на приложение для производства герою

0 голосов
/ 26 марта 2020

Я развернул в Heroku приложение с API, написанным на Nest. js, Vue. js UI и PostgreSQL database.

Это шаги, которые я предпринял для создания и развернуть все.

  1. В моем каталоге vue я запустил vue-cli-service build
  2. в vue.config.js Я указал свои proxy и outputDir следующим образом: 
outputDir: path.resolve(__dirname, "../ea-blog-api/public"),
  devServer: {
    proxy: "https://game-bible.herokuapp.com"
  },
переход к ea-blog-api моя файловая структура выглядит так

api file tree

Папка public содержит скомпилированный вывод файлов vue. Пока все хорошо Далее я фиксирую и запускаю git push master heroku моего пакета. 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 развертывает приложение, и я могу получить доступ через браузер. Когда я go для регистрации или входа в систему, рендеринг страницы, но когда я ввожу детали в поля ввода и нажимаю кнопку отправки, я всегда получаю 

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

Это идет от перехватчика Ax ios - вот код

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

ax ios перехватчик запросов Я думаю, что проблема здесь, но я не уверен, как я могу отладить его 

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;

Если я проверю свой API против Почтальона с URL-адресом heroku, он возвращает правильный результат из базы данных, и я могу проверить это, наблюдая за heroku logs --tail

Однако, делая то же самое через пользовательский интерфейс, абсолютно никаких журналов, поступающих из heroku logs

Я также проверил, что мой скомпилированный код Vue содержит правильный URL-адрес хоста Heroku.

Не уверен, что делать в этот момент ... любой совет будет принят! 1072 *

...