创建一个项目通过
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'
,则可以正确访问。
最佳答案
因为您正在访问 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 ,但您可以搜索它以获取更多详细信息,有不同的解决方案这个问题,可能更适合您的具体情况。
关于javascript - 如何为 axios baseURL 设置 Nuxt.js 的配置以在全局范围内工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66501996/