figmar
84 lines
2.2 KiB
Markdown
84 lines
2.2 KiB
Markdown
# 前端代理配置说明
|
||
|
||
## 当前 Vue 开发环境代理配置
|
||
|
||
```javascript
|
||
// vue.config.js
|
||
devServer: {
|
||
proxy: {
|
||
'/api/user-service': {
|
||
target: 'https://cloud.zhangquyun.com/api/user-service',
|
||
changeOrigin: true,
|
||
pathRewrite: {
|
||
'^/api/user-service': '/'
|
||
}
|
||
},
|
||
'/n8n': {
|
||
target: 'https://n8n.ccoop.cc',
|
||
changeOrigin: true,
|
||
pathRewrite: {
|
||
'^/n8n': ''
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## Nginx 代理配置
|
||
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-domain.com;
|
||
|
||
# 前端静态资源
|
||
root /path/to/saas-web/dist;
|
||
index index.html;
|
||
|
||
# API 代理 - 用户服务
|
||
location /api/user-service/ {
|
||
proxy_pass https://cloud.zhangquyun.com/;
|
||
proxy_set_header Host cloud.zhangquyun.com;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||
proxy_set_header X-Forwarded-Proto $scheme;
|
||
|
||
# SSL 相关
|
||
proxy_ssl_server_name on;
|
||
proxy_ssl_name cloud.zhangquyun.com;
|
||
}
|
||
|
||
# n8n 工作流代理
|
||
location /n8n/ {
|
||
proxy_pass https://n8n.ccoop.cc/;
|
||
proxy_set_header Host n8n.ccoop.cc;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||
proxy_set_header X-Forwarded-Proto $scheme;
|
||
|
||
# SSL 相关
|
||
proxy_ssl_server_name on;
|
||
proxy_ssl_name n8n.ccoop.cc;
|
||
}
|
||
|
||
# 前端路由 - SPA 模式
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 代理规则说明
|
||
|
||
| 前端请求路径 | 代理目标 | 重写后路径 |
|
||
|------------|---------|-----------|
|
||
| `/api/user-service/customer/getCurrentUser` | `https://cloud.zhangquyun.com` | `/customer/getCurrentUser` |
|
||
| `/n8n/api/v1/workflows` | `https://n8n.ccoop.cc` | `/api/v1/workflows` |
|
||
|
||
## 注意事项
|
||
|
||
1. **路径重写**：Vue 的 `pathRewrite: { '^/api/user-service': '/' }` 会把 `/api/user-service/xxx` 变成 `/xxx`
|
||
2. **SSL 代理**：目标地址是 HTTPS，需要配置 `proxy_ssl_server_name on`
|
||
3. **Host 头**：必须设置正确的 Host 头，否则后端可能拒绝请求
|
||
4. **CORS**：如果前端和 API 不在同一域名，需要配置 CORS 或使用代理
|