Коа 404 при звонке из вю - PullRequest
Новая
       29

Коа 404 при звонке из вю

0 голосов
/ 25 октября 2019

Я пытаюсь создать приложение с Koa и Nuxt. Вот что у меня есть:

Определить службу для извлечения из пожарного хранилища: 

    const Firestore = require('@google-cloud/firestore');

    const getItems = () => {

        const db = new Firestore({
            projectId: '*******',
            keyFilename: "******"
        });

        db.collection('items').get()
            .then((snapshot) => {
                return snapshot;
            })
    }

Определить их в routes.js: 

    const Router = require('@koa/router');
    const articleService = require('./services/itemservice');
    const router = new Router();

    router.get('/getitems', async(ctx, next) => {
        ctx.body = articleService.getItems();
    });
    module.exports = router;

Добавить маршруты для извлечения из routes.js: 

    app.use(router.routes());
    app.use(router.allowedMethods());

И, наконец, вызвать его из компонента: 

  let articles = axios.get('/getitems')
                  .then(response => {
                    console.log(response);
                  })//.....

Я получаю эту ошибку: 

 response:
   { status: 404,
     statusText: 'Not Found',
     headers:
      { 'content-type': 'text/html; charset=us-ascii',
        server: 'Microsoft-HTTPAPI/2.0',
        date: 'Fri, 25 Oct 2019 16:08:00 GMT',
        connection: 'close',
        'content-length': '315' },
     config:
      { url: '/getarticles',
        method: 'get',
        headers: [Object],
        transformRequest: [Array],
        transformResponse: [Array],
        timeout: 0,
        adapter: [Function: httpAdapter],
        xsrfCookieName: 'XSRF-TOKEN',
        xsrfHeaderName: 'X-XSRF-TOKEN',
        maxContentLength: -1,
        validateStatus: [Function: validateStatus],
        data: undefined },
     request:
      ClientRequest {
        _header:
         'GET /getitems HTTP/1.1\r\nAccept: application/json, text/plain, */*\r\nUser-Agent: axios/0.19.0\r\nHost: localhost\r\nConnection: close\r\n\r\n',
        _onPendingData: [Function: noopPendingOutput],
        agent: [Agent],
        socketPath: undefined,
        timeout: undefined,
        method: 'GET',
        path: '/getitems',
        _ended: true,
        res: [IncomingMessage],
        aborted: undefined,
        timeoutCb: null,
        upgradeOrConnect: false,
        parser: null,
        maxHeadersCount: null,
        _redirectable: [Writable],
        [Symbol(isCorked)]: false,
        [Symbol(outHeadersKey)]: [Object] },
     data:
      '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">\r\n<HTML><HEAD><TITLE>Not Found</TITLE>\r\n<META HTTP-EQUIV="Content-Type" Content="text/html; charset=us-ascii"></HEAD>\r\n<BODY><h2>Not Found</h2>\r\n<hr><p>HTTP Error 404. The requested resource is not found.</p>\r\n</BODY></HTML>\r\n' },
  isAxiosError: true,
  toJSON: [Function] }

Может кто-нибудь указать мне вправильное направление?

Ответы [ 2 ]

0 голосов
/ 01 ноября 2019

У меня была проблема с моим приложением nuxt / express.js: если вы попытаетесь ввести в браузере yourURL/getitems ваше приложение nuxt попытается перенаправить вас на эту страницу, а не просто показывать вам данные.

Первое, что нужно сделать, как сказать, вам нужно определить, какой URL должен обрабатывать ваш бэкэнд. Вы переходите к своему nuxt.config.js и добавляете следующую строку кода: 

serverMiddleware: ["~/api/index.js"],

Это означает, что у вас есть папка с именем api, и в этой папке у вас есть файл index.js, и это ваш express.js. / koa app.

Теперь в вашем index.js, где находится ваше приложение express.js / koa, вам нужно добавить в конце строки этот код: 

module.exports = {
   path: "/api",
   handler: app
};

Есливсе работает нормально, ваш URL должен теперь иметь префикс api, и вы сможете получить данные с помощью localhost:PORT/api/getitems

Теперь nuxt не будет пытаться направить вас к вашему url/api, потому что теперь он знает, что этоэто ваш бэкэнд

Если бы вы могли предоставить мне структуру папок вашего приложения nuxt, я мог бы вам помочь.

Вот дополнительная информация о serverMiddleware

https://nuxtjs.org/api/configuration-servermiddleware

РЕДАКТИРОВАТЬ:

где-то у вас есть папка, скажем, по имени server или api

в этой папке должен быть файл index.js и вашмаршруты, модель, контроллеры и т. д.

Допустим, у вас есть папка с именем server и на этом сервере у вас есть index.js это должно выглядеть примерно так 

const Koa = require('koa');
const app = new Koa();
Import routes from "./routes.js"

app.use(routes)

//here you define now your backend path
module.exports = {
   //you can use any path you want
   path: "/backend",
   handler: app
};
app.listen(3000);

Теперь вам нужно перейти к файлу nuxt.config.js и указать на него index.js Файл 

 serverMiddleware: ["~/server/index.js"]

Теперь вы можете получить доступ к своемуdata with axios: 

 axios.get("/backend/getitems").then(data => { console.log(data) })

Вам нужно будет добавить backend к вашему URL-адресу axios, потому что это путь, который вы определили для обработки вашим сервером.

0 голосов
/ 31 октября 2019

Я никогда не создавал приложение с Nuxt, но я все равно постараюсь вам помочь.

Во-первых, я рекомендую вам прочитать об Обещаниях:
- https://github.com/leonardomso/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch3.md
- https://github.com/leonardomso/You-Dont-Know-JS/blob/master/es6%20%26%20beyond/ch8.md
(это две главы хорошей JS серии книг!)

Во-вторых, вы можете попробовать две вещи, чтобы найти ошибку:
- добавьте блок .catch в ваши таблицы, чтобы проверить, что что-то пошло не так;
- добавить фиктивный маршрут, который просто регистрирует «ОК», чтобы убедиться, что маршруты зарегистрированы и готовы ответить.

Надеюсь, это поможет вам!

...