前端Ionic4 开发

Ionic 跨域

2019-09-25  本文已影响0人  Lingli_yu

前端的跨域问题是由于浏览器的同源策略引起,协议,域名,端口的不同均会导致跨域问题,无法访问到我们期望的服务器。

采用Ionic 开发 Web App 和Hybrid App, 同样会遇到跨域问题,解决的方式也不尽相同。

Web App

Web App的本质还是一个web 应用

如果应用要求Session作为验证token, 则第三种方式无效。原因是设置
Access-Control-Allow-Origin: * 后,请求时不会自动带上Cookie, 也就不会带上Session.

Hybrid App

Web 资源的存在位置在本地还是在云端决定了跨域问题的处理方式

Web 资源在云端

Ionic 的开发模式允许开发者将App 作为一个原生容器, 启动App时会加载云端的Web 资源,即用App 打开了一个webview。这种情况,开发同样是web app 的开发形式,跨域问题请参考以上.

Web 资源在本地

Ionic 的混合开发模式允许用户将web 资源存在本地,形式等同于原生App,加载资源的时候也是从本地,提升用户体验。
资源存放在本地时,如果这时发起网络请求,是从本机发起本机发起的(localhost)

const options = {
  method: 'post',
  data: { id: 12, message: 'test' },
  headers: { Authorization: 'OAuth2: token' }
};

cordova.plugin.http.sendRequest('https://google.com/', options, function(response) {
  // prints 200
  console.log(response.status);
}, function(response) {
  // prints 403
  console.log(response.status);

  //prints Permission denied
  console.log(response.error);
});

2、原生支持:通过JS bridge, 原生与JS通信。JS发消息给原生,原生发出网络请求,请求回复后给JS消息,消息体中携带网络返回的内容。

跨域的核心问题即浏览器的同源策略,规避或者绕过同源策略即可解决跨域问题。

上一篇 下一篇

猜你喜欢

热点阅读