项目背景:
我们有web和大屏,以及移动端,需要访问微服务接口。

然而大屏时自己打开的网页,在网页中通过js调用我的webapi。出现了跨域情况。

原因:
出现这个问题,是由于跨域请求有2次请求。

第一次:options(查看请求可用性,确定请求后端是否支持请求类型)

第二次:才是你的真实请求。(get/post...)

解决方案:(有缺点,详见最后)

PreFilter

/**
* zuul转发前过滤器
*/
@Component
public class PreFilter extends ZuulFilter {
public PreFilter() {
super();
} @Override
public String filterType() {
return FilterConstants.PRE_TYPE;
} @Override
public int filterOrder() {
return 0;
} @Override
public boolean shouldFilter() {
// return true; RequestContext ctx = RequestContext.getCurrentContext();
HttpServletRequest request = ctx.getRequest();
//只过滤OPTIONS 请求
if(request.getMethod().equals(RequestMethod.OPTIONS.name())){ return true;
}
return false;
} @Override
public Object run() { RequestContext ctx = RequestContext.getCurrentContext();
HttpServletRequest request = ctx.getRequest();
HttpServletResponse response = ctx.getResponse(); response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials","true");
response.setHeader("Access-Control-Allow-Headers","authorization, content-type");
response.setHeader("Access-Control-Allow-Methods","POST,GET"); String requestUrl = request.getRequestURL().toString();
String requestUri = request.getRequestURI();
String zuul = requestUrl.substring(0,requestUrl.indexOf(requestUri)); // zuul根路径
ctx.addZuulRequestHeader("zuul", zuul);
//不再路由
ctx.setSendZuulResponse(false);
ctx.setResponseStatusCode(200); return null;
} }

PostFilter

@Component
public class PostFilter extends ZuulFilter {
protected static final String SEND_ERROR_FILTER_RAN = "sendErrorFilter.ran"; @Override
public String filterType() {
return FilterConstants.POST_TYPE;
} @Override
public int filterOrder() {
return -1;
} @Override
public boolean shouldFilter() {
RequestContext ctx = RequestContext.getCurrentContext();
HttpServletRequest request = ctx.getRequest();
//只过滤OPTIONS 请求
if(request.getMethod().equals(RequestMethod.OPTIONS.name())){ return false;
}
return true;
} @Override
public Object run() {
RequestContext ctx = RequestContext.getCurrentContext();
HttpServletResponse response = ctx.getResponse();
HttpServletRequest request = ctx.getRequest();
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials","true");
response.setHeader("Access-Control-Expose-Headers","X-forwared-port, X-forwarded-host");
response.setHeader("Vary","Origin,Access-Control-Request-Method,Access-Control-Request-Headers");
//允许继续路由
ctx.setSendZuulResponse(true);
ctx.setResponseStatusCode(200);
return null;
}
}

解决思路:让options 请求进入过滤后,允许跨域。

缺点:网页端出现了问题。比如说退出和登录需要刷新两边。

终其原因是由于,header被设置了两边。因为过滤器无法分辨网页提交的get/post和跨域请求的第二次get/post

Spring cloud zuul跨域(一)的更多相关文章

  1. Spring cloud zuul跨域(二)

    使用  CorsFilter  解决ajax跨域问题 直接在zuul的main下面,创建corsFilter就可以了. @SpringBootApplication @EnableZuulProxy ...

  2. Spring Cloud Gateway 跨域 CORS 配置方式实现

    网上找了一堆文章全是说这样写无效 globalcors: cors-configurations: '[/**]': allowCredentials: true allowedOriginPatte ...

  3. Spring Cloud Zuul 网关使用与 OAuth2.0 认证授权服务

    API 网关的出现的原因是微服务架构的出现,不同的微服务一般会有不同的服务地址,而外部客户端可能需要调用多个服务的接口才能完成一个业务需求,如果让客户端直接与各个微服务通信,会有以下的问题: 客户端会 ...

  4. Spring Cloud Zuul 概览

    什么是API网关 网关这个词其实是一个硬件概念.因为按照定义,网络网关出现在网络的边缘,所以防火墙和代理服务器等相关功能 往往与之集成在一起.在家庭网络 和小型企业中,宽带路由器通常充当网络网关.它将 ...

  5. Spring Cloud Zuul API服务网关之请求路由

    目录 一.Zuul 介绍 二.构建Spring Cloud Zuul网关 构建网关 请求路由 请求过滤 三.路由详解 一.Zuul 介绍 ​ 通过前几篇文章的介绍,我们了解了Spring Cloud ...

  6. Spring Cloud Zuul之ZuulFilter详解

    简介 Spring Cloud Zuul网关在整个微服务体系中肩负对外开放接口.请求拦截.路由转发等作用,其核心处理则是ZuulFilter ZuulFilter部分源码 Zuul Filter全部继 ...

  7. spring MVC cors跨域实现源码解析

    # spring MVC cors跨域实现源码解析 > 名词解释:跨域资源共享(Cross-Origin Resource Sharing) 简单说就是只要协议.IP.http方法任意一个不同就 ...

  8. Spring Cloud Zuul 添加 ZuulFilter

    紧接着上篇随笔Spring Cloud Zuul写,添加过滤器,进行权限验证 1.添加过滤器 package com.dzpykj.filter; import java.io.IOException ...

  9. Spring Cloud Zuul网关 Filter、熔断、重试、高可用的使用方式。

    时间过的很快,写springcloud(十):服务网关zuul初级篇还在半年前,现在已经是2018年了,我们继续探讨Zuul更高级的使用方式. 上篇文章主要介绍了Zuul网关使用模式,以及自动转发机制 ...

随机推荐

  1. 记一次按需加载和npm模块发布实践

    按需加载 在使用 lodash 的时候我们可以使用这样的代码 //一 import {omit} from "lodash"; //二 import l from "lo ...

  2. 第66章 视频 - Identity Server 4 中文文档(v1.0.0)

    第66章 视频 66.1 2019 January [NDC] - 使用ASP.NET Core 2.2和3.0保护Web应用程序和API 1月[NDC] - 为基于OpenID Connect / ...

  3. git clone 指定分支

    使用Git下载指定分支命令为:git clone -b 分支名仓库地址 克隆asp.net core 2.1.6版本 git clone -b 2.1.6 https://github.com/asp ...

  4. mysql-8.0 安装教程(自定义配置文件,密码方式已修改)

    下载zip安装包: MySQL8.0 For Windows zip包下载地址:https://dev.mysql.com/downloads/file/?id=476233,进入页面后可以不登录.后 ...

  5. WebAPI Angularjs 上传文件

    直接上代码 HTML页面代码: <label>资源URL</label> <input type="text" class="form-co ...

  6. 用python写一个北京市的个税计算器

    #应纳税的钱:税前收入-5000元(起征点)-专项扣除(五险一金等) #工资个税的计算公式为: #个人所得税=应纳税的钱×适用税率-速算扣除数 ''' 1.全月应纳税所得额不超过3000元: 税率:3 ...

  7. 005. [转] SSH端口转发

    玩转SSH端口转发 SSH有三种端口转发模式,本地端口转发(Local Port Forwarding),远程端口转发(Remote Port Forwarding)以及动态端口转发(Dynamic ...

  8. vue学习之vuex

    1  首先还是安装 npm install vuex --save. 2 在src这种创建目录为store 创建 index.js  (getters.js ,actions.js ,mutation ...

  9. windows下vagrant的安装使用

    vagrant是简便虚拟机操作的一个软件,而使用虚拟机有几个好处: 1.为了开发环境与生产环境一致(很多开发环境为windows而生产环境为linux),不至于出现在开发环境正常而移步到正式生产环境时 ...

  10. Scrapy框架-CrawlSpider

    目录 1.CrawlSpider介绍 2.CrawlSpider源代码 3. LinkExtractors:提取Response中的链接 4. Rules 5.重写Tencent爬虫 6. Spide ...