我正在设置一个全栈应用程序,nuxt js 运行我的客户端代码,express js 运行我的 api,mysql 作为我的数据库。为了运行所有这些进程,我一直在使用 docker,更具体地说是 docker-compose。经过大量配置后,我已经让所有三个图像一起运行。但是有一个问题,我不知道如何使用 nuxt/axios 调用我的 api。
我尝试了许多不同的策略。我的 express api 可在 http://localhost:8080
处向“外部世界”提供,所以我设置了我的 axios baseURL
来反射(reflect)这一点。我在一些 nuxt js 中间件中运行了一些测试 axios get,并不断收到连接拒绝错误。我终于发现我可以使用 docker-compose 网络来连接我的前端和后端,所以我重新映射了我的 axios baseURL
至 http://api:8080
(api 是我的 docker-compose 图像的名称),并且在 nuxt js 中间件中的 axios 请求中,它的作用就像一个魅力。后来在写一些代码,想用vue方法发送axios请求。即使中间件中的 axios 请求正在处理此 baseURL
, 方法中这个新的 axios 请求报错
commons.app.js:434 OPTIONS http://api:8080/api/v1/get/colors net::ERR_NAME_NOT_RESOLVED
我尝试将我的 axios baseURL 改回 localhost,现在方法中的 axios 请求有效,但中间件中的 axios 请求不起作用。
docker-compose.yml
version: "3.3"
services:
mysql:
container_name: mysql
image: mysql:5.7
environment:
MYSQL_USER: ${MYSQL_DEV_USER}
MYSQL_PASSWORD: ${MYSQL_DEV_PASSWORD}
MYSQL_DATABASE: ${MYSQL_DEV_DATABASE}
MYSQL_ROOT_PASSWORD: ${MYSQL_DEV_ROOT_PASSWORD}
ports:
- 3306:3306
restart: always
volumes:
- mysql_data:/var/lib/mysql
- ./database/create_db.sql:/docker-entrypoint-initdb.d/create_db.sql
- ./database/insert_db.sql:/docker-entrypoint-initdb.d/insert_db.sql
api:
container_name: api
depends_on:
- mysql
links:
- mysql
build:
context: ./backend
dockerfile: Dockerfile-dev
environment:
NODE_ENV: development
MYSQL_USER: ${MYSQL_DEV_USER}
MYSQL_PASSWORD: ${MYSQL_DEV_PASSWORD}
MYSQL_DATABASE: ${MYSQL_DEV_DATABASE}
MYSQL_HOST_IP: mysql
PORT: ${API_PORT}
HOST: ${API_HOST}
expose:
- 8080
ports:
- 8080:8080
volumes:
- ./backend:/app
command: npm run dev
frontend:
container_name: frontend
depends_on:
- api
links:
- api
build:
context: ./frontend
dockerfile: Dockerfile-dev
environment:
NUXT_PORT: 3000
NUXT_HOST: 0.0.0.0
NODE_ENV: development
GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
API_HOST: api
API_PORT: ${API_PORT}
API_PREFIX: ${API_PREFIX}
expose:
- 3000
ports:
- 3000:3000
volumes:
- ./frontend:/app
command: npm run dev
volumes:
mysql_data:
nuxt.config.js
axios: {
baseURL: 'http://api:8080/api/v1'
},
nuxt 中间件
export default async function({ app, redirect, error }) {
try {
const response = await app.$axios.$get('/auth/login')
if (!response.success) {
throw new Error(response.message)
}
redirect('/admin')
} catch (err) {
console.log(err)
await app.$auth.logout()
error({ message: err.message, statusCode: 500 })
}
}
Nuxt方法
methods: {
async test() {
const colors = await this.$nuxt.$axios.$get('/get/colors')
console.log(colors)
}
}
非常感谢大家!
附言这是我的第一个堆栈溢出问题!
最佳答案
Nuxt的Axios module为 URL 前缀提供两种配置选项,一种用于服务器和 一个用于浏览器 .
axios: {
baseURL: 'http://api:8080/api/v1',
browserBaseURL: 'http://localhost/8080/api/v1'
},
关于vue.js - axios、nuxt 和 docker 的奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57368613/