Как настроить URL API, работающий на локальном хосте через порт 8080, в nuxt js? - PullRequest
Новая
       12

Как настроить URL API, работающий на локальном хосте через порт 8080, в nuxt js?

0 голосов
/ 09 января 2020

У меня есть следующий 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
    }
  },

Ответы [ 2 ]

1 голос
/ 09 января 2020

Исходя из вашей конфигурации, я предполагаю, что вы используете модуль Nuxt Ax ios ...

Кажется, проблема в том, что вы импортируете Ax ios без необходимости, таким образом обходя вашу axios конфигурацию в nuxt.config.js. Модуль Nuxt Ax ios для документов описывает его использование в компонентах: 

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');
0 голосов
/ 09 января 2020

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

@CrossOrigin(origins = "http://localhost:3000")
...