问题背景
在开发前台网站时，我们会通过ajax访问网关上的服务。在本发开发时，由于域名不同，会存在跨域的问题。解决跨域有以下几种方案：
- 服务端支持跨域
- JSONP
- 代理转发
本次我通过第三种“代理转发”的方式在Java端通过servlet拦截并转发，从而避免跨域的问题。
错误描述：No 'Access-Control-Allow-Origin' header is present on the requested resource
ajax-spring-cloud-cross-domain.jpg
解决方案
引入smiley-http-proxy-servlet:1.11
<dependency>
<groupId>org.mitre.dsmiley.httpproxy</groupId>
<artifactId>smiley-http-proxy-servlet</artifactId>
<version>1.11</version>
</dependency>
在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)
在测试过程中发起了一个post请求，结果发出的内容类型默认是form-data,而服务端使用的是@RequestBody，导致后端无法识别前端传递的参数，所以报错，打断点也进不去。4xx的错误码说明问题的症结主要在客户端。
参考资料
- HTTP-Proxy-Servlet, 作为 Java servlet实现的Smiley代理的HTTP
- Smiley's HTTP Proxy implemented as a Java servlet
关注公众号交流学习
关注Java分布式架构实战, 持续精进
联系我，学习交流
网友评论