原 Vue学习
|-原 Capacitor + Vue +Andriod Studio 解决跨域问题
利用Vite 代理
太好了！恭喜登录成功 🎉
## 总结一下最终解决方案
### 1. Vite 代理配置（`vite.config.js`）
```javascript
server: {
host: '0.0.0.0',
port: 5174,
proxy: {
'/api': {
target: 'http://testl13.com',
changeOrigin: true,
secure: false,
},
'/sanctum': {
target: 'http://testl13.com',
changeOrigin: true,
secure: false,
}
}
}
```
### 2. 前端请求用相对路径
```javascript
// 不设置 baseURL
// axios.defaults.baseURL = 'http://testl13.com';
// 不需要 withCredentials（Token 认证）
// axios.defaults.withCredentials = true;
const response = await axios.post('/api/login', formData.value, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
```
### 3. 关键要点
| 问题 | 解决方式 |
|------|---------|
| 网页端 CORS | Laravel CORS 配置 + 清除缓存 |
| Capacitor Android CORS | Vite 代理转发，避免跨域 |
| `Http plugin not implemented` | 不用 Capacitor HTTP 插件，直接用 axios |
| WebView 崩溃 | 清除应用数据，重启模拟器 |
---
## 后续建议
### 生产环境部署
开发环境用代理，**生产环境需要改**：
1. **前端打包后**，Capacitor 的 Origin 变成 `capacitor://localhost`
2. **后端 CORS 配置**要包含：
```php
'allowed_origins' => [
'capacitor://localhost',
'http://localhost',
'http://your-production-domain.com',
],
```
3. **生产环境不用 Vite 代理**，前端直接请求后端域名：
```javascript
axios.defaults.baseURL = 'https://your-production-api.com';
```
### 封装请求工具
建议封装一个 `apiClient`，自动处理 Token：
```javascript
// utils/request.js
import axios from 'axios';
import { Preferences } from '@capacitor/preferences';
const apiClient = axios.create({
headers: {
'Accept': 'application/json', ...
