ajax访问Spring|ajax访问Spring Cloud网关服务跨域，通过Servlet代理转发方案分享 ajax访问SpringCloud网关服务跨域

问题背景
在开发前台网站时，我们会通过ajax访问网关上的服务。在本发开发时，由于域名不同，会存在跨域的问题。解决跨域有以下几种方案：

服务端支持跨域
JSONP
代理转发

本次我通过第三种“代理转发”的方式在Java端通过servlet拦截并转发，从而避免跨域的问题。
错误描述：No 'Access-Control-Allow-Origin' header is present on the requested resource

ajax访问Spring|ajax访问Spring Cloud网关服务跨域，通过Servlet代理转发方案分享

文章图片
ajax-spring-cloud-cross-domain.jpg 解决方案
引入smiley-http-proxy-servlet:1.11

org.mitre.dsmiley.httpproxy smiley-http-proxy-servlet 1.11

在application.properties中增加配置

############################## 本地开发服务转发配置 ############################ # order proxy.api.order.servlet_url=/api/order/* # 代理到QA环境 proxy.api.order.target_url=http://mgr2.xxx.qa/api/order # 代理到本发开发环境 #proxy.api.order.target_url=http://127.0.0.1:8012 proxy.api.order.logging_enabled = true# account proxy.api.account.servlet_url=/api/account/* # 代理到QA环境 proxy.api.account.target_url=http://mgr2.xxx.qa/api/account # 代理到本发开发环境 #proxy.api.account.target_url=http://127.0.0.1:8013 proxy.api.account.logging_enabled = true### basic,item等其它domain的配置 ############################## 本地开发服务转发配置 ############################

注册servletBean

/** * 本地开发服务转发配置，防止跨域 * * @author : jamesfu * @date : 19/2/2019 * @time : 1:10 PM */ @Profile({"dev"}) @Configuration public class HttpProxyServletConfig {@Autowired private Environment environment; /** * 注册ProxyServlet * * @return ServletRegistrationBean of ProxyServlet */ @Bean public ServletRegistrationBean servletRegistrationOrder() { ServletRegistrationBean servletRegistrationBean = new ServletRegistrationBean(new ProxyServlet(), environment.getProperty("proxy.api.order.servlet_url")); servletRegistrationBean.setName("proxy.api.order"); servletRegistrationBean.addInitParameter("targetUri", environment.getProperty("proxy.api.order.target_url")); servletRegistrationBean.addInitParameter(ProxyServlet.P_LOG, environment.getProperty("proxy.api.order.logging_enabled", "false")); servletRegistrationBean.addInitParameter(ProxyServlet.P_PRESERVEHOST, "false"); servletRegistrationBean.addInitParameter(ProxyServlet.P_PRESERVECOOKIES, "true"); return servletRegistrationBean; }/** * 注册ProxyServlet * * @return ServletRegistrationBean of ProxyServlet */ @Bean public ServletRegistrationBean servletRegistrationAccount() { ServletRegistrationBean servletRegistrationBean = new ServletRegistrationBean(new ProxyServlet(), environment.getProperty("proxy.api.account.servlet_url")); servletRegistrationBean.setName("proxy.api.account"); servletRegistrationBean.addInitParameter("targetUri", environment.getProperty("proxy.api.account.target_url")); servletRegistrationBean.addInitParameter(ProxyServlet.P_LOG, environment.getProperty("proxy.api.account.logging_enabled", "false")); servletRegistrationBean.addInitParameter(ProxyServlet.P_PRESERVEHOST, "false"); servletRegistrationBean.addInitParameter(ProxyServlet.P_PRESERVECOOKIES, "true"); return servletRegistrationBean; }### basic,item等其它domain的配置 }

编写前端测试代码

requestServiceData: function (pageNo, pageSize) { var self = this this.queryData.pageNo = pageNo this.queryData.pageSize = pageSize $.ajax({ type: 'post', url: '/api/order' + window.PURCHASER_URL.URL_PURCHASER_TRADE_RETURN_PAGE_LIST, data: JSON.stringify(this.queryData), contentType: 'application/json; utf-8', headers: { 'Authorization': 'Bearer 3b6d42a1-7caa-497f-8a6c-0f25326b29a3', //Cookie: 'xxx-oauth2-access-token=18b776db-1ffc-4558-9bc4-52d115820046; ' }, beforeSend: function (request) { //request.setRequestHeader("Authorization", "Bearer 16e29379-a891-4e5a-a836-ef7ff2af22d5"); //request.setRequestHeader("Cookie", "xxx-oauth2-access-token=d4bb7364-01df-4fcb-b67b-faf7bdcf2a02"); } }).then(function (res) { console.log(res) self.rowCount = res.total self.list = res.datas })return false; }

其它收获
HTTP 415 错误 – 不支持的媒体类型(Unsupported media type) 【ajax访问Spring|ajax访问Spring Cloud网关服务跨域，通过Servlet代理转发方案分享】在测试过程中发起了一个post请求，结果发出的内容类型默认是form-data,而服务端使用的是@RequestBody，导致后端无法识别前端传递的参数，所以报错，打断点也进不去。4xx的错误码说明问题的症结主要在客户端。
参考资料