Ionic学习记录

Ionic跨域问题解析
本文详细介绍了Ionic项目在不同环境下的跨域问题及其解决方案。包括了浏览器端设置代理的方法及插件网站资源等内容。
1、跨域问题
浏览器中的运行

当你运行 ionic serve 时发生了什么呢?

  • 启动了一个本地 web 服务器
  • 你的浏览器打开并定位到本地服务器地址

这让你看着你的应用加载到你电脑上一个浏览器里,地址是:http://localhost:8100(如果你选择了 localhost的话)。

你的 origin 就是 localhost:8100

任何的发送到其他不是 localhost:8100 主机上的 AJAX 请求都会把localhost:8100作为他的 origin,这就会导致必须要经过一个 CORS 预检来看是否可以访问(非本机的)服务器资源。

设备上的运行

当你运行 ionic run 时发生了什么呢?

  • app 所有的文件被拷贝到设备(或者模拟器)上。
  • app 运行起来,触发手机/模拟器上的浏览器访问已经被拷贝上去的文件,比如: file://some/path/www/index.html

因为你正在运行的 URI 是 file://,所以你的 origin 将不会存在,所以任何向外的请求都不再需要 CORS 请求。

在设备使用 livereload 运行

当你运行 ionic run -l时又发生了什么呢?

  • 启动了一个本地服务器
  • app 运行起来,触发手机/模拟器上的一个浏览器通过http://192.168.1.1:8100来运行文件(你的 本地 ip 可能是其他的)。

你的 origin 就会是 192.168.1.1:8100

任何一个发送到不是192.168.1.1:8100的服务器上的 AJAX 请求都会需要进行 CORS 预检请求来看是否可以访问到该服务器上的资源。

参考文档:http://blog.ionic.io/handling-cors-issues-in-ionic/

2、Ionic跨域解决,浏览器端

  设置代理:在ionic.config.json中加入。注意,实际访问的地址只能填写域名,后面的目录不能填写,否则会出现404错误

"proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://news-at.zhihu.com"
    }
  ]

  请求的时候,再加上具体的目录。实际上,是把/api 映射为了 http://news-at.zhihu.com,最终地址是http://news-at.zhihu.com + /api/4/news/latest

this.http.get('/api'+'/api/4/news/latest').subscribe((data) => {
      console.log(data);
    });
 3、插件网站收集

  http://ngcordova.com/

  https://cordova.apache.org/

转载于:https://www.cnblogs.com/zhaoyihao/p/7580745.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值