javascript - 如何为 axios baseURL 设置 Nuxt.js 的配置以在全局范围内工作？

Question

创建一个项目通过

npm init nuxt-app <project-name>

为 axios 配置 baseURL by here

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 中的服务器，但获得了 3000 的基本 URL，该端口正在运行 nuxt.js。

如果在pages/post.vue中配置axios.defaults.baseURL = 'http://localhost:9000'，则可以正确访问。

Answer 1

因为您正在访问 axios 的“全局”实例，为了使用 @nuxtjs/axios 提供/配置的实例，请使用 this。 $axios.get('/posts') 在你的 Vue 组件中。

在此处查看更多详细信息: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 ，但您可以搜索它以获取更多详细信息，有不同的解决方案这个问题，可能更适合您的具体情况。