Angular +Ionic调用第三方接口跨域问题

一.跳转第三方接口,项目中常常会遇到的一些跨域问题。

比如:
调用第三方的支付接口,地图,等。
还有就是从一个app或者H5跳转另一个app页面。
常常会遇到一些跨域问题:

问题1:

接口报错500,错误显示为:
在这里插入图片描述

这时候就需要在
proxy.config.json文件中去设置:允许跨域。

 "changeOrigin": true,
{
  "/api": {
    "target": "https://zzz.qqq.com",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": "/api"
    }
  },
  "/abc": {
    "target": "https://xxxx.yyyy.com",
    "changeOrigin": true,
    "pathRewrite": {
      "^/abc": "/api"
    }
  }
}

问题2:跳转第三方接口无法实现传参。

比如实现免登录功能【获取localstorage中的相同用户的token】

方法>1

使用iframe跨域
实现页面间的接收与发送。
参考:localstorage的跨域存储方案

方法>2

如果是*同一基础域名,所用的协议,端口都要一致***
可以使用
document.domain
方法实现跨域获取
给两个页面同时加入共有的域名,即可实现页面间的操作。

document.domain = "xxx.com";

参考:document.domain跨域

无关跨域,同时也可以使用一个不太安全的方法[不推荐使用]:

方法>2.5

js的window.location.search方法获取。
当然也存在一些容易被替换或占用的问题,
可以使用相关别名或者条件过滤

   if(window.location.search){
      let sceoToken = window.location.search.split("?")[1].replace("%20"," ");
      if(sceoToken.length<=50){
        if(/***/.test(sceoToken)){
          localStorage.setItem("token",sceoToken)
        }
      }
    }

更多推荐