慕课网有一门免费课程，详细介绍了ajax跨域问题，讲的非常好，各位可以去看看
https://www.imooc.com/learn/947

问题描述

如下图所示,当我们的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插件
不能上谷歌商店可以使用国产浏览器，如QQ浏览器应用商店不需要翻墙
如下图2,安装后并开启,现在发出请求就不会出现跨域异常啦

图 1,安装过程

图 2,启用跨域插件

方法二:设置代理

此方法也很简单，只适用于web端，如部署项目到服务器端，android app默认不存在跨域，所以不需要此配置，ios根据使用的不同webview，可能存在会跨域
执行ionic serveapp默认运行在http://localhost:8100/下, 所以只有请求地址是localhost并且端口是8100时才不会有跨域问题

修改api地址为localhost:8100，因为app启动的地址是localhost:8100
在ionic.config.json文件中配置代理

{
  "name": "ionic2_tabs",
  "integrations": {
    "cordova": {}
  },
  "type": "ionic-angular",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://88.128.19.209:9898/api/"
    }
  ]
}

注意

当执行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", "*");
这种方式的原理就是:服务端告诉浏览器,我的服务接受任何请求来源,请不要拦截
java后台使用拦截器统一处理,这种方式前端最省心了

        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Max-Age", "360000");  // 缓存预检请求，即一个小时内不在发送OPTIONS请求
        filterChain.doFilter(servletRequest, servletResponse);

web.xml添加拦截器

java spring boot方式

    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        config.setMaxAge(3600L); // 缓存预检请求，即一个小时内不在发送OPTIONS请求
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }

方法四:使用nginx-推荐

nginx配置详情点这里，下面是使用nginx解决跨域方式2核心配置

        location /api {
            proxy_pass   http://88.128.19.209:8081/api/;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Max-Age 3600;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Headers $http_access_control_request_headers;

            if ($request_method = OPTIONS ) {
                return 200;
            }
        }

最后

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

ionic常见问题-跨域(No 'Access-Control-Allow-Origin' header)