ionic解决跨域访问

最新推荐文章于 2022-08-19 19:40:18 发布

幸福的雏

最新推荐文章于 2022-08-19 19:40:18 发布

阅读量1.9w

点赞数

分类专栏： ionic 文章标签： ionic-跨域

本文链接：https://blog.csdn.net/haozhoupan/article/details/51149896

版权

本文详细介绍了在 Ionic 开发过程中遇到的 CORS 问题及其原因，并提供了两种解决方案：通过 Angular Constant 配置代理服务器，以及使用 Gulp 自动转换地址。重点讲解了如何在 Ionic CLI 中设置代理服务器，以避免 CORS 预检请求，确保在本地开发和设备运行时能够正常访问外部 API。

摘要由CSDN通过智能技术生成

如果你通过 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 会是什么。