ajax访问Spring Cloud网关服务跨域，通过Servl

2019-02-20 本文已影响77人 Java分布式架构实战

问题背景

在开发前台网站时，我们会通过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的错误码说明问题的症结主要在客户端。

参考资料

关注公众号交流学习

关注Java分布式架构实战, 持续精进

联系我，学习交流