Невозможно получить доступ к ExpressJS конечным точкам приложения Nuxt JS - PullRequest
Новая
       13

Невозможно получить доступ к ExpressJS конечным точкам приложения Nuxt JS

0 голосов
/ 23 апреля 2020

Я довольно новичок в Nuxt и Vue. Я работал с React и Express раньше, но я не уверен, что мне не хватает шага, указывающего c для конфигурации Nuxt.

Я пытаюсь получить данные с конечной точки на моем Express сервер, и он работает нормально локально, но как только я развернул его, у меня возникла одна из нескольких различных ошибок. Сначала я получал

Доступ к XMLHttpRequest в 'http://localhost: 3000 / ENDPOINT ' из источника 'https://APPNAME.herokuapp.com' заблокирован Политика CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Мне удалось обойти это, установив пакеты cors и @ nuxtjs / proxy npm добавление app.use (cors ()) на мой сервер и добавление свойства changeOrigin к proxy в nuxt.config. js .. Теперь я получаю 404, когда он пытается получить APPNAME.herokuapp. com / ENDPOINT.

Я создал новое тестовое приложение, используя npx create-nuxt-app, выбрав express в качестве пользовательской инфраструктуры сервера и настроив тестовую конечную точку на сервере / в индексе. js

app.get('/test', (req, res) => {
  res.status(200).send('reached test')
})

В моем представлении nuxt я добавил метод: 

runTest () {
  this.$axios.$get('/test')
    .then(success => console.log('success text:', success))
}

Опять же, это работает нормально локально, но после развертывания у меня возникла проблема CORS, пока я не добавил пакет cors и changeOrder. Теперь, получая 404, кажется, что я не могу получить доступ к конечным точкам моего сервера. Кто-нибудь знает что-нибудь об этом?

Заранее спасибо за любую помощь!

ОБНОВЛЕНИЕ:

Мой nuxt.config.js файл: 

module.exports = {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    titleTemplate: '%s - ' + process.env.npm_package_name,
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify'
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  proxy: {
    '/api/': {
      target: 'http://localhost:3000/',
      pathRewrite: {
        '^/api/': ''
      },
      changeOrigin: true
    }
  },
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {}
    }
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

Мой файл сервера: 

const express = require('express')
const consola = require('consola')
const cors = require('cors')
const { Nuxt, Builder } = require('nuxt')
const app = express()

// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = process.env.NODE_ENV !== 'production'

async function start () {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const { host, port } = nuxt.options.server

  await nuxt.ready()
  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  app.use(cors())

  app.get('/test', (req, res) => {
    res.status(200).send('reached test')
  })

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

В моем тестовом приложении это в основном стандартные леса nuxt.

Спасибо

...