Javascript 如何设置numxt.js'；是否为axios baseURL配置全局工作？

通过创建项目

npm init nuxt-app <project-name>

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

---

如果配置

axios.defaults.baseURL='0http://localhost:9000“

在

页面/post.vue

中，它可以正确访问。

因为您正在访问

axios

的“全局”实例，要使用

@nuxtjs/axios

提供/配置的实例，请使用

this.$axios.get（“/posts”）

在您的Vue组件中

请在此处查看更多详细信息：

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

更新

要在请求中添加基本身份验证，可以使用nuxt插件扩展

$axios

实例（此处和此处的一些详细信息）

在插件内部，在

onRequest

callback中添加授权标题：

导出默认值（{$axios}）=>{
$axios.onRequest（配置=>{
config.headers.common['Authorization']='Basic{您的base64编码用户名/密码在这里}'
})
}

虽然不建议将登录凭据直接放在源代码中，但使用环境变量更合适，但这是另一个主题，如果您感兴趣，可以在此处查看

---

就CORS错误而言，这基本上意味着浏览器不允许JavaScript与具有不同域/端口/架构（源）的远程服务器通信，除非远程服务器在

访问控制允许源

标题中使用匹配的源进行响应。一个简单的解决方案是在服务器响应中添加

访问控制允许源代码：

标题如果您控制了服务器，但您可以在标题中搜索更多详细信息，此问题有不同的解决方案，可能更适合您的具体情况。

要访问全局，您需要使用它。$axios，而无需将其导入其他地方。

此处相同。有人知道答案吗？非常感谢。顺便问一下，您知道如何设置调用远程服务器的全局基本身份验证，远程服务器使用

用户名

和

密码

来保护请求吗？我在

axios{…}

中设置

auth:{username:'username'，password:'password'}，

块

numxt.config.js

，但导致

CORS错误

和

401未经授权

。换句话说，我可以通过basic auth访问服务器数据。@realworld为什么不利用已经内置的？它拥有您所需要的一切，无需您手动完成所有操作，也无需您在实现中可能忘记的事情…@balexandre如何将其与basic auth一起使用？我找不到它的用法。@realworld您可以使用nuxt插件扩展$axios实例（此处和此处的一些详细信息：），然后在插件中，您可以在onRequest回调中添加授权头：`export default（{$axios}）=>{$axios.onRequest（config=>{config.headers.common['authorization']='Basic{your base64 encoded username/password here}}}`@realworld不用担心，我在回答中添加了更多细节，因为注释在标记样式中非常有限。

axios.get('/posts')