时间戳

首页 > 解决方案 > 如何在 nuxt js 的 8080 端口上配置在 localhost 上运行的 API URL？

rest - 如何在 nuxt js 的 8080 端口上配置在 localhost 上运行的 API URL？

问题描述

我有以下 vue 文件。我的 REST API 基本 URL 是http://localhost:8080/api/。当我直接访问http://localhost:8080/api/dfc/system/docbases时，我得到了如图所示的响应。

["gr_swy","SubWayX_DEMO"]

但我想通过在http://localhost:3000/restapi/上运行的 nuxt js 获得响应。我试图关注所有文章，但无法弄清楚我做错了什么。

<template>
  <div class="container">
    {{docbases}}
  </div>
</template>

<script>
  import axios from "axios";
  #import axios from "../../.nuxt/axios"; (tried both)

  export default {
    methods: {
      // asyncData({ req, params }) {
      //   return axios.get("http://localhost:8080/api/dfc/system/docbases")
      //     .then(res => {
      //       return { docbases: res.data };
      //     }).catch((e) => {
      //     error({ statusCode: 404, message: 'Not found' })
      //   })
      // },
      async asyncData ({ params }) {
        const { data } = await axios.get('http://localhost:8080/api/dfc/system/docbases');
        return { docbases: data }
      }
    },
    head: {
      title: "D2Rest"
    }
  };
</script>

我的 nuxt.config.js 是这样的：我用 true 和 false 尝试了 changeOrigin。你能帮我配置什么额外的东西吗？

axios: {
    proxy: true,
  },

  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  },

  proxy: {
    '/api/': {
      target: 'http://localhost:8080/',
      pathRewrite: { "^/api": "" },
      changeOrigin: false,
      prependPath: false
    }
  },

标签： restapivue.jsnuxt.js

解决方案

根据您的配置，我假设您使用的是Nuxt Axios 模块...

问题似乎是您不必要地导入了 Axios，从而绕过axios了nuxt.config.js. Nuxt Axios 模块文档描述了它在组件中的用法：

export default {
  async asyncData({ $axios }) {
    const ip = await $axios.$get('http://icanhazip.com')
    return { ip }
  }
}

注意解构参数$axios。使用该参数而不是导入您自己的实例axios（即不要做import axios from 'axios'），这与 Nuxt 配置的不一样。不需要其他导入$axios。

代理网址

另一个问题是您在 URL 中明确请求代理地址，但这应该被排除在外：

// const { data } = await $axios.get('http://localhost:8080/api/dfc/system/docbases');  // DON'T DO THIS
const { data } = await $axios.get('/api/dfc/system/docbases');

推荐阅读