Ionic 3应用Android端调用Youtube Data API遇404错误求助

这种浏览器运行正常、编译成Android应用后就报404的问题，大概率是URL格式、权限配置或者API密钥读取环节出了问题，我帮你梳理几个关键排查和修复步骤：

1. 先修复请求URL的参数分隔符 #

你代码里用了&作为参数分隔符，这是HTML里的实体转义字符，但在JavaScript字符串中应该直接用&。浏览器环境下可能会自动帮你修正这个格式，但Android的WebView不会做这个处理，导致实际请求的URL参数格式混乱，Youtube API无法识别，直接返回404。

把你的getVideos方法改成这样：

getVideos(channel) { 
  return this.http.get(`https://www.googleapis.com/youtube/v3/playlists?key=${this.apiKey}&channelId=${channel}&part=snippet,id&maxResults=20`) 
    .map(res => { 
      return res.json()['items']; 
    }) 
}

2. 确认API密钥是否正确读取 #

你在config.xml里配置了YouTubeDataApiKey的preference，但要确保this.apiKey确实拿到了这个值。Ionic 3里不能直接读取config.xml的preference，需要借助Cordova插件：

首先安装cordova-plugin-app-preferences插件：

ionic cordova plugin add cordova-plugin-app-preferences
npm install @ionic-native/app-preferences

然后在你的服务里添加读取密钥的逻辑：

import { AppPreferences } from '@ionic-native/app-preferences/ngx';

// 注入AppPreferences
constructor(private http: Http, private appPreferences: AppPreferences) {}

async getVideos(channel) {
  // 先从config.xml读取API密钥
  const apiKey = await this.appPreferences.fetch('YouTubeDataApiKey');
  const url = `https://www.googleapis.com/youtube/v3/playlists?key=${apiKey}&channelId=${channel}&part=snippet,id&maxResults=20`;
  return this.http.get(url).map(res => res.json()['items']);
}

浏览器里正常运行可能是你在开发环境硬编码了密钥，但Android端没正确读取配置，导致请求的key无效，也会引发404或权限错误。

3. 检查内容安全策略（CSP）配置 #

打开src/index.html，确认meta标签的CSP允许访问Google API域名。更新或添加以下配置：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src 'self' https://www.googleapis.com;">

这里的connect-src必须包含https://www.googleapis.com，否则Android WebView会直接阻止请求，表现为404。

4. 确保Cordova白名单插件生效 #

虽然你已经在config.xml里加了<access origin="*" />，但要确保cordova-plugin-whitelist插件已经安装：

ionic cordova plugin add cordova-plugin-whitelist

这个插件是处理跨域和访问权限的核心，没有它的话，config.xml里的权限配置不会生效。

最后：调试验证请求 #

修改完成后，重新编译Android应用：

ionic cordova build android

然后用Chrome DevTools连接设备调试，查看网络请求的实际URL是否正确——可以在getVideos里加一行日志打印：

async getVideos(channel) {
  const apiKey = await this.appPreferences.fetch('YouTubeDataApiKey');
  const url = `https://www.googleapis.com/youtube/v3/playlists?key=${apiKey}&channelId=${channel}&part=snippet,id&maxResults=20`;
  console.log('实际请求URL:', url); // 在Chrome DevTools的控制台查看
  return this.http.get(url).map(res => res.json()['items']);
}

检查URL里的key、channelId等参数是否完整且正确，就能很快定位剩下的问题。

内容的提问来源于stack exchange，提问作者fitzmode