Ionic 跨域

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

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

Web App

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

• 代理服务器：通过代理服务器，把本地的请求通过代理服务器转发给目标服务器 webpack devServer

• 本地采用非安全模式浏览器: 非安全模式浏览器将不在采用同源策略
  Mac: open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/UserName/MyChromeDevUserData/
  Window:

  922445-20180814152040697-1083243052.png
  关闭所有的chrome浏览器，打开chrome 浏览器的属性窗口，在路径上添加" --args --disable-web-security --user-data-dir"， 如上图

• Cors: 设置Cors 的request header(后端) Access-Control-Allow-Origin 为 *（任何源都可以访问, 相对不安全）

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

• JSONP: 利用JS可以加载非同源的外部资源的形式发送网络请求，以回调的方式读取资源。

Hybrid App

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

Web 资源在云端

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

Web 资源在本地

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

• 后端不需要通过Session验证信息，可以采用设置Cors 的Access-Control-Allow-Origin: * 来访问。
• 后端需要通过Seesion 验证信息，则需要通过原生的方式来做网络请求。
  1、Cordova 插件：cordova-plugin-advanced-http

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消息，消息体中携带网络返回的内容。

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