В Nuxt.js вы можете проксировать запросы к бэкэнду в dev режиме, используя модуль @nuxtjs/proxy.
1. Установите модуль @nuxtjs/proxy в свой проект:
npm install @nuxtjs/proxy
2. Добавьте его в nuxt.config.js:
module.exports = {
modules: [
'@nuxtjs/proxy'
],
proxy: {
'/api/': { target: 'http://backend.example.com', pathRewrite: { '^/api/': '' } }
}
}
В этом примере мы настроили прокси для всех запросов, начинающихся с /api/. Они будут перенаправлены на адрес http://backend.example.com. Также мы использовали pathRewrite для удаления /api/ из пути запроса.
3. После этого вы можете использовать прокси в своих компонентах или страницах:
export default {
data() {
return {
posts: []
}
},
async created() {
try {
const response = await this.$axios.$get('/api/posts')
this.posts = response.data
} catch (error) {
console.error(error)
}
}
}
В этом примере мы используем $axios, который является универсальным HTTP клиентом в Nuxt.js, чтобы сделать GET запрос к /api/posts.
4. Запустите проект в dev режиме:
npm run dev
Теперь все запросы, начинающиеся с /api/, будут проксированы к бэкэнду вместо отправки на фронтенд сервер.
Примечание: Обратите внимание, что модуль @nuxtjs/proxy предназначен только для разработки и не следует использовать в продакшене. В продакшене рекомендуется настроить реверс-прокси на вашем веб-сервере.