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

我正在开发一个Vue.js应用程序，它只有前端（没有服务器），并向不同的API发送大量请求。原本相当简单的应用程序变得更加复杂。一些API也存在问题，因为浏览器不接受由于错误而产生的响应。这就是我尝试测试的原因，如果我可以将应用程序迁移到Nuxt.js

我的方法如下（受此启发），但我希望有更好的方法通过服务器从客户机发送请求

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' }
],

服务器中间件/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()
  })
}

中间件/test.js（请参阅：）

pages/api.vue

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

{{body}}
导出默认值{
中间件：“测试”，
计算：{
正文（）{
退回这个。$store.body
}
}
}

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

---

我发现最后一步不太理想，但我不知道如何只发送JSON而不发送整个页面。但我认为，一定有更好的方法将数据传送到客户端。

有两种可能的解决方案：

代理（见：）

空气污染指数（见：）

广告1。代理

代理的配置可以如下所示：

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

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.config.js

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

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

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

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

ad2。API

创建新的Nuxt.js应用程序时，选择Express作为项目的服务器端框架

server/index.js

server/confluence.js（简化）

通过API的请求可以如下所示：

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

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