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

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)
        }
      }
    }