Question

我正在开发仅具有前端（无服务器）的Vue.js应用程序，并将大量请求发送到不同的API。最初非常简单的应用变得更加复杂。而且某些API存在问题，因为浏览器由于CORS而无法接受响应。这就是为什么我要测试是否可以将应用程序迁移到Nuxt.js的原因。

我的方法如下（受此comment的启发），但我希望有一种更好的方法可以通过服务器从客户端发送请求。

pages / test-page.vue

methods: {
  async sendRequest(testData) {
    const response = await axios.post('api', testData)
    // Here can I use the response on the page.
  }
}

nuxt.config.js

serverMiddleware: [
  { path: '/api', handler: '~/server-middleware/postRequestHandler.js' }
],

server-middleware / postRequestHandler.js

import axios from 'axios'

const configs = require('../store/config.js')

module.exports = function(req, res, next) {
  let body = ''

  req.on('data', (data) => {
    body += data
  })

  req.on('end', async () => {
    if (req.hasOwnProperty('originalUrl') && req.originalUrl === '/api') {
      const parsedBody = JSON.parse(body)

      // Send the request from the server.
      const response = await axios.post(
        configs.state().testUrl,
        body
      )

      req.body = response
    }
    next()
  })
}

middleware / test.js（请参阅：API: The Context）

export default function(context) {
  // Universal keys
  const { store } = context
  // Server-side
  if (process.server) {
    const { req } = context
    store.body = req.body
  }
}

pages / api.vue

<template>
  {{ body }}
</template>
<script>
export default {
  middleware: 'test',
  computed: {
    body() {
      return this.$store.body
    }
  }
}
</script>

当用户在页面“ test”上执行操作（将启动方法“ sendRequest（）”）时，请求“ axios.post（'api'，testData）”将导致响应，其中包含页面“ api”的HTML代码。然后，我可以从HTML中提取JSON“ body”。

我发现最后一步不是很理想，但是我不知道如何只发送JSON而不发送整个页面。但我想，必须有一种更好的方法将数据发送到客户端。

Answer 1

有两种可能的解决方案：

代理（请参阅：https://nuxtjs.org/faq/http-proxy）
API（请参阅：https://medium.com/@johnryancottam/running-nuxt-in-parallel-with-express-ffbd1feef83c）

广告1.代理

代理的配置如下所示：

nuxt.config.js

module.exports = {
...
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  proxy: {
    '/proxy/packagist-search/': {
      target: 'https://packagist.org',
      pathRewrite: {
        '^/proxy/packagist-search/': '/search.json?q='
      },
      changeOrigin: true
    }
  },
  ...
}

通过代理的请求如下所示：

axios
  .get('/proxy/packagist-search/' + this.search.phpLibrary.searchPhrase)
  .then((response) => {
    console.log(
      'Could get the values packagist.org',
      response.data
    )
    }
  })
  .catch((e) => {
    console.log(
      'Could not get the values from packagist.org',
      e
    )
  })

广告2。API

创建新的Nuxt.js应用时，

选择 Express 作为项目的服务器端框架。

server / index.js

...
app.post('/api/confluence', confluence.send)
app.use(nuxt.render)
...

server / confluence.js （简体）

const axios = require('axios')
const config = require('../nuxt.config.js')

exports.send = function(req, res) {
  let body = ''
  let page = {}

  req.on('data', (data) => {
    body += data
  })

  req.on('end', async () => {
    const parsedBody = JSON.parse(body)
    try {
      page = await axios.get(
        config.api.confluence.url.api + ...,
        config.api.confluence.auth
      )
    } catch (e) {
      console.log('ERROR: ', e)
    }
  }

  res.json({
    page
  })
}

通过API的请求如下所示：

this.$axios
  .post('api/confluence', postData)
  .then((response) => {
    console.log('Wiki response: ', response.data)
  })
  .catch((e) => {
    console.log('Could not update the wiki page. ', e)
  })

如何通过Nuxt.js服务器从Nuxt.js客户端发送请求，以及如何将响应接收回客户端

1 个答案: