0

我正在构建一个需要调用 Google Geocoder api 的网页。为了从公共视图中隐藏 api 密钥，我正在尝试设置服务器中间件以充当 REST api 端点。

我检查了所有文档并复制了所有文档，但响应始终相同。我从 axios 请求中收到了整个 html 正文，而不是我通过 express 发回的任何其他内容。

在我的组件中，我有以下代码：

  computed: {
    normalizedAddress() {
      return `${this.member.address.street} ${this.member.address.city}, ${this.member.address.state} ${this.member.address.zip}`.replace(
        /\s/g,
        '+'
      )
    }
  },
  methods: {
    async getLocation() {
      try {
        const res = await axios.get(
          `/api/geocode/${this.normalizedAddress}`
        )
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    }
  },

在 nuxt.config.js 我有这个设置

serverMiddleware: ['~/api/geocode.js'],

在我的项目的根目录中，我有一个 api 文件夹，其中存储了 geocode.js。geocode.js 在下面

import express from 'express';
import axios from "axios";
let GEO_API = "MY_API_KEY"

const app = express();
app.use(express.json());

app.get("/", async (req, res) => {
   const uri = `https://maps.googleapis.com/maps/api/geocode/json?address=${req.params.address}&key=${GEO_API}`
   try {
      const code = await axios.get(uri);
      if (code.status !== "OK") {
         return res.status(500).send(code.status)
      }
      return res.status(200).send(code);
   } catch (err) {
      return res.status(500).send(err);
   }
});

export default {
   path: "/api/geocode/:address",
   handler: app
}

再次。响应总是将来自网站的整个 html 文档发回（大约 100 页代码）。即使我将响应设置为固定文本，也不会发送。

我能想到的唯一可能会打断它的细节是，我使用正在使用的@nuxtjs/router 构建模块进行了自己的自定义路由设置。

4

0 回答 0