Как настроить URL-адрес API, работающий на localhost на порту 8080 в nuxt js?

У меня есть следующий файл vue. Мой базовый URL-адрес REST API - http://localhost:8080/api/. Когда я получаю доступ к http://localhost:8080/api/dfc/system/docbases напрямую, я получаю ответ, как показано.

["gr_swy","SubWayX_DEMO"]

Но я хочу получить ответ через nuxt js, который работает на http://localhost:3000/restapi/. Я пытался следить за всеми статьями, но не мог понять, где я делаю не так.

<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 выглядит так: я пробовал changeOrigin с обоими значениями true и false. Не могли бы вы помочь мне, какие дополнительные вещи мне нужно настроить?

axios: {
    proxy: true,
  },

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

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

api rest vue.js nuxt.js
person Srivastava    schedule 09.01.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Исходя из вашей конфигурации, я предполагаю, что вы используете модуль 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 прокси

Другая проблема заключается в том, что вы явно запрашиваете адрес прокси в 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');
person tony19    schedule 09.01.2020
comment
Спасибо! Это работает с icanhazip.com, но не с этим localhost: 8080 / api / dfc / system / docbases. Не уверен, что с этим не так, у меня работает прямой URL, но не с аксиомой. Что еще мне нужно добавить в качестве URL-адреса API? Любая идея? - person Srivastava; 09.01.2020
comment
localhost: 8080 / api / dfc / system / docbases внутренне использует URL-адрес интрасети, прокси-сервер там - person Srivastava; 09.01.2020
comment
Проблема в том, что вы включаете адрес прокси в URL. Удалите его так, чтобы он начинался с /api/ (например, /api/dfc/system/docbases). - person tony19; 09.01.2020
comment
Затем он берет с localhost: 300 и дает ошибку 404. Да @ nuxtjs / прокси установлен. - person Srivastava; 09.01.2020
comment
В моем случае настройка прокси-сервера работает у меня с учетом примечаний в моем ответе. - person tony19; 09.01.2020
comment
Позвольте нам продолжить это обсуждение в чате. - person Srivastava; 09.01.2020

arrow_upward
0
arrow_downward

Извините, я не включил Cross Origin в своем java-коде. Я включил сейчас, и это решено.

@CrossOrigin(origins = "http://localhost:3000")
person Srivastava    schedule 09.01.2020