132 lines
4.6 KiB
Markdown
132 lines
4.6 KiB
Markdown
# 极光SDK跨域问题解决方案
|
||
|
||
## 问题描述
|
||
|
||
flux-web 发布后访问极光服务时出现跨域错误。从 `https://abc.1216.top` 发起到 `https://h5.verification.jiguang.cn` 的请求被浏览器阻止。
|
||
|
||
## 问题原因
|
||
|
||
极光SDK在初始化时会**直接由浏览器**向 `https://h5.verification.jiguang.cn` 发送请求，这是一个跨域请求。
|
||
|
||
**重要说明**：
|
||
- 请求是浏览器直接从H5页面发起到极光服务器的，**不经过你的Nginx服务器**
|
||
- CORS响应头必须由**被请求的服务器**（极光服务器）返回才有效
|
||
- 你的Nginx只能控制自己返回的响应头，**无法控制极光服务器的响应头**
|
||
- 因此，在Nginx中添加CORS响应头对这种情况**完全无效**
|
||
|
||
如果极光服务器没有为当前域名配置CORS白名单，浏览器会阻止这个请求。
|
||
|
||
## 解决方案
|
||
|
||
### 方案一：配置极光控制台域名白名单（**唯一有效方案**）
|
||
|
||
这是**唯一有效**的解决方案，因为只有极光服务器可以控制它返回的CORS响应头。
|
||
|
||
1. 登录极光控制台：https://www.jiguang.cn/
|
||
2. 进入应用管理 → 选择应用 → 一键登录配置
|
||
3. 在"Web端配置"中添加允许的域名：
|
||
- `abc.1216.top`
|
||
- `https://abc.1216.top`（如果需要）
|
||
4. 保存配置并等待生效（通常几分钟内）
|
||
|
||
**为什么这是唯一有效方案**：
|
||
- 浏览器直接请求极光服务器，不经过你的服务器
|
||
- 只有极光服务器配置了域名白名单后，才会在响应头中添加 `Access-Control-Allow-Origin`
|
||
- 你的Nginx、后端服务器都无法解决这个问题
|
||
|
||
### 方案二：检查SDK初始化配置
|
||
|
||
确认 `jverify.service.js` 中的 `domainName` 参数正确设置：
|
||
|
||
```javascript
|
||
window.JVerificationInterface.init({
|
||
appkey: appId,
|
||
domainName: window.location.origin, // 应该是 https://abc.1216.top
|
||
debugMode: debugMode,
|
||
// ...
|
||
});
|
||
```
|
||
|
||
### 方案三：使用后端代理（不推荐，仅作为备选）
|
||
|
||
**注意**：此方案**不推荐**，因为：
|
||
1. 极光SDK是第三方SDK，其内部请求无法被代理
|
||
2. SDK初始化时的请求是SDK内部发起的，无法修改
|
||
3. 即使代理了部分API，SDK的其他功能可能仍然失败
|
||
|
||
如果极光控制台确实不支持域名白名单配置（通常都支持），可以尝试：
|
||
|
||
1. 在后端添加代理接口（如 `/zcore/jpush/proxy`）
|
||
2. 修改极光SDK的调用方式（**需要修改SDK源码，不推荐**）
|
||
3. 后端转发请求到极光服务器
|
||
|
||
**强烈建议**：优先使用方案一，在极光控制台配置域名白名单。
|
||
|
||
### 方案四：检查网络环境
|
||
|
||
1. 确认服务器网络可以访问 `h5.verification.jiguang.cn`
|
||
2. 检查是否有防火墙或安全组规则阻止了请求
|
||
3. 确认HTTPS证书配置正确
|
||
|
||
## 调试步骤
|
||
|
||
1. **检查浏览器控制台**
|
||
- 打开浏览器开发者工具（F12）
|
||
- 查看 Network 标签页
|
||
- 找到对 `h5.verification.jiguang.cn` 的请求
|
||
- 查看响应头中是否有 `Access-Control-Allow-Origin`
|
||
|
||
2. **检查请求详情**
|
||
- 查看请求的 Referer 是否为 `https://abc.1216.top`
|
||
- 查看请求的 Origin 是否为 `https://abc.1216.top`
|
||
- 查看响应状态码和错误信息
|
||
|
||
3. **检查极光SDK初始化日志**
|
||
- 查看浏览器控制台中的 `[JVerifyService]` 日志
|
||
- 确认 `domainName` 参数的值是否正确
|
||
- 确认SDK初始化是否成功
|
||
|
||
## 常见错误
|
||
|
||
### 错误1：CORS policy blocked
|
||
```
|
||
Access to XMLHttpRequest at 'https://h5.verification.jiguang.cn/...'
|
||
from origin 'https://abc.1216.top' has been blocked by CORS policy
|
||
```
|
||
**解决方法**：在极光控制台配置域名白名单
|
||
|
||
### 错误2：Network Error
|
||
```
|
||
Network Error: Failed to fetch
|
||
```
|
||
**解决方法**：检查网络连接和防火墙配置
|
||
|
||
### 错误3：SDK初始化失败
|
||
```
|
||
[JVerifyService] 极光SDK初始化失败
|
||
```
|
||
**解决方法**：检查 `domainName` 参数和 AppKey 配置
|
||
|
||
## 验证方法
|
||
|
||
配置完成后，按以下步骤验证：
|
||
|
||
1. 清除浏览器缓存
|
||
2. 重新访问页面
|
||
3. 打开浏览器控制台，查看是否有跨域错误
|
||
4. 检查极光SDK是否成功初始化
|
||
5. 测试一键登录功能是否正常
|
||
|
||
## 相关文件
|
||
|
||
- `src/js/services/jverify.service.js` - 极光SDK服务
|
||
- `src/js/pages/index.page.js` - 主页面（包含一键登录初始化）
|
||
- `nginx.conf.example` - Nginx配置示例
|
||
|
||
## 注意事项
|
||
|
||
1. 极光控制台的域名白名单配置可能需要几分钟才能生效
|
||
2. 确保配置的域名与访问域名完全一致（包括协议 http/https）
|
||
3. 如果使用CDN，可能需要同时配置CDN域名
|
||
4. 某些浏览器（如Safari）对CORS有更严格的限制
|