如何为 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 并且不需要在其他地方导入它。