问题描述

如下图所示,当我们的app请求后台服务时,就会出现浏览器跨域问题

翻译:已被CORS策略阻止：在请求的资源上不存在“Access-Control-Allow-Origin”头。 因此，不允许原始'http：// localhost：8100'访问

什么是跨域

• 首先要明确,跨域是浏览器的安全策略,当我们请求地址和app启动地址不一致时,就会触发浏览器的安全限制

什么时候会出现跨域问题

• 在浏览器开发app的时候,假如app运行的地址是http://localhost:8100/,当请求的ip不是localhost或端口不是8100时,就会出现跨域问题
• app在真机上运行不存在跨域问题

最新版的ionic ios app使用了wkwebview在真机上是存在跨域请求的.所以解决跨域需要使用后台手段(以下方法3和方法4)或者使用native http插件

解决跨域问题

方法一:安装chrome跨域插件

• 这种方法最简单
• 去谷歌应用商店安装chrome Allow-Control-Allow-Origin插件
• 不能上谷歌商店就去我的csdn下载,下载后浏览器打开扩展程序界面,把下载的.crx文件拖进去就了

• 如下图2,安装后并开启,现在发出请求就不会出现跨域异常啦.

  
  图 1,安装过程

图 2,启用跨域插件

方法二:设置代理

执行ionic serveapp运行在http://localhost:8100/, 所以只有请求地址是localhost并且端口是8100时才不会有跨域问题
具体设置代码如下图,其中Constants.ts和LoginService.ts是我的业务代码,重点是配置ionic.config.json

• 这里贴出ionic.config.json代码,一般只有一个后台服务,我这里有两个

     {
        "name": "ionic2_tabs",
         "app_id": "",
         "typescript": true,
         "v2": true,
         "proxies": [
           {
             "path": "/app",
             "proxyUrl": "http://88.128.18.144:7777/app"
           },
           {
             "path": "/kit_file_server",
             "proxyUrl": "http://88.128.18.144:3333/kit_file_server"
           }
         ]
       }

注意

• 当执行ionic run android --livereload进行调试时,默认启动的端口是8000不是8100,ip也不是localhost,如我的是88.128.18.144.(使用这种调试方式,手机网络和电脑网络必须连接同一个网络)

• 这时候app是在手机浏览器运行,方法一肯定是不行了.

• 具体配置只是把http://localhost:8100/, 改为http://88.128.18.144:8000,修改后的Constants.ts如下图
  

  

• 如上描述,执行ionic serve和ionic run android --livereload默认启动的ip和端口不一样,导致配置有点不一样,所以为了方便,使用ionic serve --port 8000 --address 88.128.18.144指定端口和ip启动
  

  

方法三:后台服务端设置

• 如下图是java代码,设置了login方法的响应头response.setHeader("Access-Control-Allow-Origin", "*");

• 这种方式的原理就是:服务端告诉浏览器,我的服务接受任何请求来源,请不要拦截

  
  

• 后台使用拦截器统一处理,这种方式前端最省心了
  

  

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");
        //headers.add("Access-Control-Allow-Origin", "http://abcd.org"); //allows CORS requests only coming from abcd.org
        headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS");
        headers.add("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, X-Codingpedia, Authorization,token");

方法四:使用nginx

• 点击看详情

最后

相关文章:跨域资源共享 CORS 详解