如何為 axios baseURL 設置 Nuxt.js 的配置以在全球范圍內工作？

Question

通過創建項目

npm init nuxt-app <project-name>

在此處為 axios 配置baseURL

npm install @nuxtjs/axios

nuxt.config.js

  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
    baseURL: 'http://localhost:9000',
  },

  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },

在 pages/post.vue 中使用

axios.get('/posts')

無法在9000中調用服務器，但將基礎 URL 設置為3000 ，其中端口 nuxt.js 正在運行。

如果在pages/post.vue中配置axios.defaults.baseURL = 'http://localhost:9000'則可以正常訪問。

Answer 1

因為您正在訪問axios的“全局”實例，所以為了使用@nuxtjs/axios提供/配置的實例，請在您的 Vue 組件中使用this.$axios.get('/posts') 。

在此處查看更多詳細信息： https://axios.nuxtjs.org/usage

================================

更新

要在您的請求中添加基本身份驗證，您可以使用 nuxt 插件擴展$axios實例（這里有一些詳細信息Extending Axios和這里Nuxt Plugin ）。

在您的插件中，在onRequest回調中添加授權 header ：

export default ({ $axios }) => {
  $axios.onRequest(config => {
    config.headers.common['Authorization'] = 'Basic {your base64 encoded username/password here}'
  })
}

雖然不建議將登錄憑證直接放在源代碼中，使用環境變量會更合適，但這是另一個話題，您可以查看此處https://nuxtjs.org/docs/2.x/configuration-glossary/ configuration-env/如果你有興趣。

就 CORS 錯誤而言，它基本上意味着瀏覽器不允許 JavaScript 與具有不同域/端口/模式（來源）的遠程服務器通信，除非遠程服務器在Access-Control-Allow-Origin中以匹配的來源進行響應header。 一個簡單的修復方法是添加Access-Control-Allow-Origin: * header 如果您可以控制服務器，則在您的服務器響應中，但您可以搜索更多詳細信息，此問題有不同的解決方案，可能更適合你的具體情況。

Answer 2

要訪問全局，您需要使用 this.$axios 並且不需要在其他地方導入它。