美文网首页ionic2Ionic2开发
Ionic2实战-跨域问题处理

Ionic2实战-跨域问题处理

作者: 逃离火星 | 来源:发表于2017-08-31 09:04 被阅读242次

前言

跨域问题产生的原因是浏览器出于保证前端数据安全的目的,以域名作为分割,让各个域名之间不能互相访问。而实际情况下我们又有很多场景需要访问不同域的资源,所以就出现了跨域问题。

所以,只有在浏览器中会出现跨域问题,打包成APP以后已经不再是浏览器的环境,就不存在跨域问题。

我们本次要解决的也是Ionic2 APP网页版的跨域问题。

解决方案

  • 方案一:后端支持跨域(跨域资源共享CORS)
    只需要在后端返回给前端的Http响应头中添加说明,表示该响应支持跨域资源共享,则前端可以在不做任何修改的情况下支持跨域,这也是我觉得处理跨域问题目前最通用的办法。详细的后端写法见:http://www.ruanyifeng.com/blog/2016/04/cors.html

如后端为Java Servlet,则在response中添加支持跨域的协议,如为Spring-Boot,则写法为:

image.png
  • 方案二:使用代理

如下图,可以在前端ionic.config.json文件中配置请求代理,图中的配置含义为所有path包含“app”的请求都发送到地址“http://localhost:8900/app”,注意后端地址的域名即为http://localhost:8900

然后用ionic serv启动项目,则也不存在跨域问题。该方法的原理是通过ionic-cli内置的调试server代理了项目发出去的请求,以我们指定的域名发送。

image.png

相关文章

  • Ionic2实战-跨域问题处理

    前言 跨域问题产生的原因是浏览器出于保证前端数据安全的目的,以域名作为分割,让各个域名之间不能互相访问。而实际情况...

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • web跨域解决方案

    围绕以下几点介绍: 什么是跨域? 常用的几种跨域处理方法? crossdomain.xml解决跨域问题 什么是跨域...

  • webpack处理前端跨域

    前后端分离开发的时候,遇到跨域问题,可以用webpack处理跨域问题

  • Axios跨域处理方案

    Ajax跨域问题使用jsonp处理 Axios跨域请求问题处理: 1、在config文件夹下的prod和dev的j...

  • Axios跨域处理方案

    Ajax跨域问题使用jsonp处理 Axios跨域请求问题处理: 1、在config文件夹下的prod和dev的j...

  • 前端踩过的坑

    关于前端 跨域问题 大概问题 1,前端无须处理,需要在后台配置 niginx的配置 处理跨域的域名 关于布局上 ...

  • Node.js开发笔记-7: express跨域问题(Acces

    //处理跨域问题,添加以下代码

  • 跨域问题处理

    nginx处理 后端处理

  • zuul路由的跨域配置

    跨域说明和规则 (方法一)在zull网关服务中统一处理跨域问题,但下面所有controller中去掉跨域注解---...

网友评论

  • 他_4856:你好,刚刚入坑ionic,使用了你的方法,部分代码如下:
    this.http.get('/ip',{params: {'key':'3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5'}}) ;
    "proxies": [
    {
    "path": "/ip",
    "proxyUrl": "https://apis.map.qq.com/ws/location/v1/ip";;
    }
    ]
    浏览器没问题,但是打包成apk就获取不到数据了,搞了好几天了一直没解决,请问能指导一下吗?十分感谢:pray:

本文标题:Ionic2实战-跨域问题处理

本文链接:https://www.haomeiwen.com/subject/bjhfjxtx.html