在ionic项目中，如果你使用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请求,您的主机源将由Origin标头指定，该标头会自动包含在浏览器的CORS请求中。因为ionicframework.com和主机api.com并不匹配，我们从ionicframework.com的请求必须要经过服务器的批准，才能够访问该资源，以Http Options请求头的形式。
如果我们遇到了上面的错误，说明服务器没有给我们的地址ionicframework.com赋予访问该资源的权限。
下面来看一下，当通过ionic serve,ionic run,ionic run -l三种不同方式运行app时，你的origin分别是什么？
在浏览器中运行时
在执行ionic serve时，发生了什么？
- 启动了一个本地web服务器
- 你的浏览器自动打开了指向本地服务器地址的一个页面
这时你可以看到你的app加载到了你的浏览器上，地址是http://localhost:8100(如果你选择了localhost)。
这时，你的origin是localhost:8100。
任何发送到主机而不是localhost:8100的AJAX请求，都将以localhost:8100作为其origin，因此需要经过CORS预检请求，来查看是否有权限访问该资源。
在设备上运行时
当执行ionic run时，又发生了些什么呢？
- 应用程序文件被复制到设备（或模拟器）。
- app开始运行，然后启动一个设备（或模拟器）上的浏览器来打开这些文件，类似
file://some/path/www/index.html
这样，你的origin将不存在了，因为你正在运行于一个文件（file://）URI。理所当然，你的任何向外请求将不需要通过CORS预检。
在设备上通过自动加载（livereload）运行时
执行ionic run -l时，又将发生什么呢？
- 首先启动一个本地web服务器
- 设备（或模拟器）上app开始运行，启动一个浏览器来开地址
http://192.168.1.1:8100（你的本地IP地址）上的文件。
这时，你的origin是192.168.1.1:8100。
任何发送到主机而不是192.168.1.1:8100的AJAX请求，都将以192.168.1.1:8100作为其origin，因此需要经过CORS预检请求，来查看是否有权限访问该资源。
在Ionic中处理CORS问题
CORS问题仅仅发生在，当我们以ionic serve或ionic run -l来运行或测试app的时候。
有2种方法来解决这个问题.
第一种，比较容易的方法，是设置远端服务器，让它可以接受所有源的请求。第二种，有时候我们没有权限去修改远端服务器，此时就需要一个不指定源的请求。
我们可以使用代理服务器来实现这个方案。ionic cli给我们提供了一个很方便的配置代理服务器的方法，下面我们看一下如何来实现。
Ionic CLI代理服务器
下面是关于代理（proxy）的一个定义：
In computer networks, a proxy server is a server (a computer system or an application) that acts as an intermediary for requests from clients seeking resources from other servers.
在计算机网络中，代理服务器是一个客户端请求的中介服务器（计算机系统或应用），它用于帮助客户端寻找位于其他服务器上的资源。
要解决我们在ionic中遇到的CORS问题，我们需要设置一个代理服务器，它接受我们的请求，并向API端点发出新的请求，然后接受响应，并将其转发回我们的应用程序。
由于代理服务器需要向目标发送新的请求，因此请求中将不会有origin(源)，也就不再需要CORS了。 需要非常注意一点是，origin是浏览器自动帮我们添加在请求头中的。
Ionic CLI具有为客户端请求设置代理服务器的能力，用来帮助您解决CORS问题，下面来看一下Ionic CLI设置代理的方法。
设置代理服务器
再次说明一下，仅仅在ionic serve或ionic run -l的时候需要设置代理。
首先，我们需要在ionic.project（注意，ionic2 cli新版本已经将此文件重命名为ionic.config.json）配置文件中设置代理。 这将告诉Ionic本地服务器监听这些路径并将这些请求转发到目标网址。
在app中，我们需要替换包含endpoint的URLS，并设置为我们的代理服务器地址。（In our app, we will need to replace our endpoint URLS to be set to the proxy server address for when we are running serve or run -l.）
什么是
endpoint？在项目中 endpoint有时也写作baseUrl，比如这个
http://cors.api.com/api/book/2/detail的endpoint是http://cors.api.com/api，再比如http://localhost:8101/api/user/123的endpoint是http://localhost:8101/api。笔者没有想到好的中文来替代这个英文单词，所以没有进行翻译，希望小伙伴们能够理解它的意思就好啦~~~~~
我们可以通过设置一些gulp任务，用gulp中的替换模块(replace)来替换出这些URLS，来简化这一步骤。
比较推荐的方法是设置一个Angular Constant来同一设置的endpoint，方便统一进行修改和维护。
下面是操作步骤。我们需要设置一个Angular Service ApiEndpoint来获取数据。
配置代理地址
配置代理有两个需要注意的地方。
-
path：你在本地Ionic服务器上访问它们的路径 -
proxyUrl：你最终希望通过API调用达到的proxyUrl
修改ionic.config.json(旧版本Ionic CLI是ionic.project)：
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://cors.api.com/api"
}
]
}
如上所述，当您请求访问http://localhost:8100/api的ionic服务器时，它会替你代理请求到http://cors.api.com/api上。这样，就不需要CORS了。
设置Angular Constant
很容易将你的ApiEndpoint设置为Angular Constant。下面，我们已经将ApiEndpoint指定为我们的代理url。然后，我们就可以使用这个url作为一个常数。
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.constant('ApiEndpoint', {
url: 'http://localhost:8100/api'
})
//For the real endpoint, we'd use this
// constant('ApiEndpoint', {
// url: 'http://cors.api.com/api'
// })
设置Angular Service
angular.module('starter.services', [])
//NOTE: We are including the constant `ApiEndpoint` to be used here.
.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
};
})
使用Gulp实现URL自动切换（可选）
（这是可选的，如果你使用手动配置就不需要gulp自动配置了）
首先，需要安装replace module
npm install --save replace
然后，我们需要修改gulpfile.js，并添加2个任务，来添加代理地址、移出代理地址。
// `npm install --save replace`
var replace = require('replace');
//注意下面的文件地址，它是包含你endpoint或baseurl的文件
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切换的时候，将ApiEndpoint替换出来可能会比较麻烦。因此我们推荐使用gulp在程序启动时自动完成这个过程。
其实，最简单的处理CORS问题的方法，是要求你的api提供服务器来允许所有的origin。但是，有时候我们无法这么做。
使用Angular Constant和replace module会给我们一个愉快的解决方法来处理CORS问题。
如果你需要一个具体的例子，可以看一下这个示例工程。
上面说的就是所有的当你访问一个API服务器时，关于处理CORS问题的全部。
作者：ten5743
链接：https://www.jianshu.com/p/2b955fd32a45
來源：简书
网友评论