获取第三方GET接口的data数据,服务器需要设置正确的 Access-Control-Allow-Origin

在现代Web开发中,由于同源策略的限制,浏览器通常不允许从一个域名(origin)直接访问另一个域名的资源,除非服务器端设置了适当的CORS(跨源资源共享)策略。
项目中如何直接获取get接口https://api.cp.139.com/cgate/cme/v1/appUpgrade/version?channel=baidu02 下的接口相应对象:
{
"code": "200",
"msg": "操作成功",
"header": null,
"info": {
"versionNo": "2.1.0",
"upgradeType": 30,
"upgradeDesc": "1、优化了网络保障服务,提供更稳定、流畅的使用体验。 \n2、修复已知问题,优化产品体验。",
"channelCode": "baidu02",
"channelName": "百度投放02",
"apkAddress": "https://obs-wx-ysj-xnl-pro-001.obs.cidc-rp-12.joint.cmecloud.cn:443/public/upgrade/apk/baidu02/cloudphone-heyingyun-baidu02-v2.1.0-20240701_1446-release_20240701150412_sec_sign.apk"
},
"success": true
}
下的apkAddress

要获取第三方接口 https://api.cp.139.com/cgate/cme/v1/appUpgrade/version?channel=baidu02 下的 apkAddress,您可以使用JavaScript中的 fetch API来发起GET请求。以下是一个示例代码,展示了如何获取接口响应对象并提取 apkAddress

// 使用fetch发送GET请求
fetch('https://api.cp.139.com/cgate/cme/v1/appUpgrade/version?channel=baidu02')
  .then(response => {
    // 首先检查响应的状态
    if (response.ok) {
      // 如果响应状态码为200-299,解析JSON响应体
      return response.json();
    } else {
      // 如果响应状态码不是200-299,抛出错误
      throw new Error('Network response was not ok.');
    }
  })
  .then(data => {
    // 处理JSON响应数据
    console.log('APK地址:', data.info.apkAddress);
    // 在这里您可以使用data.info.apkAddress变量
  })
  .catch(error => {
    // 处理请求过程中发生的任何错误
    console.error('请求失败:', error);
  });

在这段代码中:

  1. 使用 fetch 函数发起GET请求到指定的URL。
  2. 使用 .then() 方法处理响应,首先检查响应是否成功(response.ok)。
  3. 如果响应成功,使用 response.json() 解析JSON格式的响应体。
  4. 在第二个 .then() 方法中,访问解析后的响应数据 data,并提取 apkAddress 字段。
  5. 如果请求或响应处理过程中发生错误,使用 .catch() 方法捕获并处理这些错误。

请注意,由于网络请求是异步的,所以 apkAddress 的值将在 fetch 调用的Promise解决后获得。您可能需要根据实际情况将这段代码放在组件的适当生命周期钩子中,例如Vue组件的 mounted 钩子。

此外,由于您提供的URL可能受到CORS策略的限制,如果服务器没有设置正确的 Access-Control-Allow-Origin 头,浏览器可能会阻止脚本访问响应数据。如果遇到这种情况,您需要确保服务器端配置了正确的CORS策略,或者使用代理服务器来绕过CORS限制。

posted @ 2024-08-05 16:57  yoona-lin  阅读(34)  评论(0编辑  收藏  举报