ionic解决跨域访问
来源:互联网 发布:淘宝网上采购平台 编辑:程序博客网 时间:2024/04/28 11:34
如果你通过 ionic serve 或者 ionic run 命令使用或 live reload 或者访问过外部 API 结点,那么你肯定遇到过 CORS 问题,譬如下面这样:
XMLHttpRequest cannot load http://api.ionic.com/endpoint.No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://localhost:8100' is therefore not allowed access.
那么问题来了,什么是 CORS 呢?又是什么导致了这个问题嘞?
什么是 CORS?
CORS=Cross origin resource sharing(跨域资源共享)
origin 就是你现在正在看的主站,你现在访问的是 http://ionicframework.com/blog/handling-cors-issues-in-ionic
,那么 origin 就是ionicframework.com
。
如果说我们向 http://cors.api.com/api
发起一个 AJAX 请求,那么 host origin 会由被浏览器自动列入CORS请求的 Orgin header 指定好了,由于ionicframework.com
和 api.com
的主机并不匹配,所以在一个HTTP OPTIONS请求报头的 form 中我们所有从 ionicframework.com
发起的访问服务器资源的请求必修得到服务器的授权。
假如上面的请求出现错误(不被服务器允许),那么我们是无法从服务器访问到(api.com上的)资源的。
让我们来看一下当你通过ionic serve, ionic run,ionic run -l来运行app的时候 origin 会是什么。
浏览器中的运行
当你运行 ionic serve 时发生了什么呢?
- 启动了一个本地 web 服务器
- 你的浏览器打开并定位到本地服务器地址
这让你看着你的应用加载到你电脑上一个浏览器里,地址是:http://localhost:8100
(如果你选择了 localhost的话)。
你的 origin 就是localhost:8100
。
任何的发送到其他不是 localhost:8100
主机上的 AJAX 请求都会把localhost:8100
作为他的 origin,这就会导致必须要经过一个 CORS 预检来看是否可以访问(非本机的)服务器资源。
设备上的运行
在设备使用 ionic run运行
当你运行 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 预检请求来看是否可以访问到该服务器上的资源。
在 ionic 中解决 CORS 问题
CORS 问题只有在我们通过 ionic serve 或者 ionic run -l 来运行或测试应用的时候才会遇到。
解决这个问题有两个办法:
- 在你的 API 服务器端允许所有的 origin,然而我们并不能控制我们访问的所有的结点。我们需要的是一个不指定origin的请求。
- 我们可以通过使用代理服务器来解决这个问题。
我们来看看 Ionic CLI 是怎样提供了一个易配置的代理服务器的。
Ionic CLI代理服务器
关于代理的快速定义
在计算机网络中,代理服务器就是一个服务器(计算机系统或者应用程序),是客户端发起的请求从其他服务器寻求资源的中间桥梁。
我们为了避开 CORS 问题需要做的就是有一个代理服务器,可以接收我们的请求,向 API 结点发出一个新的请求,接收结点响应,之后反馈给我们的应用,从而避开 CORS 问题。
Ionic CLI 就有给你提供一个代理服务器从而避开所有可能会遇到的 CORS 问题的能力。
由于代理服务器向你的目标主机发起了一个新的请求,所以就不会再有 origin,也就不再需要 CORS 了。要注意,在浏览器增加了 Origin header 是很重要的。
设置代理服务器
注意,这些设置只有通过ionic serve 和 ionic run -l 运行应用才需要
首先我们需要在 ionic.project文件中设置我们的代理,这会告诉我们的 Ionic 本地服务器监听这些地址,然后发送这些请求到我们的目标地址上。
在我们的应用中,当运行 serve 或 run -l 时候,我们需要把要访问的结点地址替换成代理服务器的地址。替换地址的方法有两个:
- 使用gulp任务的 replace 模块来转换出口地址会简单一点。
- 建议的方法是设置一个 Angular Constant 来定位到我们试图代理的 API。
方法1:通过Angular Constant
这就是我们下面要采用的方法。我们会同时设置一个 Angular Service 来从 API结点 获取数据。
设置代理路径
比如说我们想要访问 ·http://cors.api.com/api·,但并不允许我们来自 localhost:8100
的 origin。
代理的设置包括两件事儿:
- 在你本地 Ionic 服务器需要访问的 path
- 最终需要访问API的 proxyUrl
{ "name": "proxy-example", "app_id": "", "proxies": [ { "path": "/api", "proxyUrl": "http://cors.api.com/api" } ] }
通过ionic serve启动你的服务器。
像我们上面指定的这样,当你访问 Ionic 服务器地址 http://localhost:8100/api
的时候,它会以你的名义访问 http://cors.api.com/api
。这样,就不需要 CORS 了。
设置 Angular Constant
把你的 API结点设置成 Angular Constants是非常简单的一件事儿。
下面我们就来把API结点指定成为我们的代理 URL。
之后(发布时候)我们会把正式的地址作为 constant。
angular.module('starter', ['ionic', 'starter.controllers','starter.services']).constant('ApiEndpoint', { url: 'http://localhost:8100/api' })// .constant('ApiEndpoint', {// url: 'http://cors.api.com/api'// })
设置好之后你就能像下面这样在应用中引入ApiEndpoint依赖,随意调用这个constant了。
设置Angular Service
angular.module('starter.services', [])//NOTE: We are including the constant `ApiEndpoint` to be used .factory('Api', function($http, ApiEndpoint) { console.log('ApiEndpoint', ApiEndpoint) var getApiData = function() { return $http.get(ApiEndpoint.url + '/tasks') .then(function(data) { console.log('Got some data: ', data); return data; }); }; return { getApiData: getApiData };})
方法2:通过 Gulp 自动转换地址
这个过程中,我们需要修改gulpfile.js来添加两个任务:添加代理和移除代理。
首先安装replace模块 - npm install –save replace
// npm install --save replacevar replace = require('replace');var replaceFiles = ['./www/js/app.js'];gulp.task('add-proxy', function() { return replace({ regex: "http://cors.api.com/api", replacement: "http://localhost:8100/api", paths: replaceFiles, recursive: false, silent: false, });})gulp.task('remove-proxy', function() { return replace({ regex: "http://localhost:8100/api", replacement: "http://cors.api.com/api", paths: replaceFiles, recursive: false, silent: false, });})
结语
本教程向你展示了一个解决通过ionic serve或ionic run -l命令运行应用时候遇到的 CORS 问题的方法。
我们知道在ionic serve和ionic run -l之间转换 API 结点地址的时候可能会是个麻烦,比较建议的方法是启动一个 gulp 进程。
解决 CORS 问题最简单的方法是让 API 提供者允许所有的 hosts,然后这事儿有点儿不太现实。
使用 Angular constant 和 replace 模块可以给我们一个避开 CORS 的折中的办法。
- ionic解决跨域访问
- ionic 跨域访问
- 解决ionic请求数据跨域问题
- 解决跨域访问
- ionic下videogular解决字幕文件跨域问题[已解决这个大坑]
- IONIC跨域问题
- 解决ajax跨域访问
- Ajax跨域访问解决
- jsonp解决跨域访问
- 解决跨域访问问题
- 解决跨域访问问题
- java解决跨域访问。
- 解决cookie跨域访问
- 解决cookie跨域访问
- 解决cookie跨域访问
- ngnix解决跨域访问
- 解决Nginx跨域访问
- Ionic CROS 跨域问题
- 历史搜索记录保存
- 渗透神器sqlmap的使用笔记
- 全部最新版postfix+dovecot+postgresql+centos7+amavisd+clamd+spamassassin源文件安装搭建完善的邮件服务器
- 删除临时表 ORA-14452 错误
- Must-have plugins for Ionic Framework
- ionic解决跨域访问
- Redis常用命令
- 关于socket长连接的心跳包
- wireshark怎么抓包、wireshark抓包详细图文教程
- 基于cryptopp -- A Password Manager密码管理系统
- The attribute locations is undefined for the annotation type ContextConfiguration
- 利用AuthorizeAttribute属性简单避免 MVC 中的跨域攻击
- 在ListView中实现异步加载
- 后台定位上传的代码实践