Distributed system cross-domain call problem

In distributed systems, most remote calls are made in the background, from hession, to dubbo, dubbox, spring cloud, etc., so the front desk does not feel cross-domain problems, but there are some special requirements that require front-end remote calls

Calling the B system page from the A system does not consider the permission issue here, because some systems are single-point and authorized.

Call method:

1、ajax ,

Most people use jquery as the basic framework, then use jquery as the foundation.

Direct use of ajax does not allow cross-domain, and the caller is not allowed to report an error, so how to solve it?

First add the header when calling ajax, as follows

$.ajax({
             url: href,
             type: "GET",
             dataType:"html",
             beforeSend: function (xhr) {
                 xhr.setRequestHeader("content-type", "web");
               xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
             },
             success: function(data,status){
                 //On ajax success do this
                 console.info("load page "+href+" is success.");
                 renderTable(data);
             },
             error: function(xhr, ajaxOptions, thrownError) {
                 //On error do this
                 console.info("error."+ajaxOptions+",status:"+xhr.status+","+thrownError);

             }
           });

This allows the calling interface to issue ajax requests, and the receiving end should also add a corresponding response.

Generally, if a system needs to support cross-domain, just add a filter configuration, the filter content is as follows

wrote

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CrossDomainFilter implements Filter {

@Override
public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain filterChain) throws IOException, ServletException {
// 强制类型转换
HttpServletRequest request = (HttpServletRequest) arg0;
HttpServletResponse response = (HttpServletResponse) arg1;
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
/*
解决引用出现跨域问题
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.ttf
*/
//跨域设置-start
final String origin = request.getHeader("origin");
if (origin!=null && origin.trim().length()>0) {
response.setHeader("Access-Control-Allow-Origin", origin);
} else {
response.setHeader("Access-Control-Allow-Origin", "*");
}
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "OPTIONS,GET,PUT,POST,DELETE,HEAD");
response.setHeader("Access-Control-Max-Age", "2592000");
response.setHeader("Access-Control-Allow-Headers","content-type,access-control-allow-origin,access-control-request-headers,access-control-request-method,accept,origin,authorization,x-requested-with,serviceName,locale");
//跨域设置-end

//放行、将请求转发到目的地
filterChain.doFilter(request, response);
}

@Override
public void init(FilterConfig arg0) throws ServletException {
// TODO Auto-generated method stub
}
@Override
public void destroy() {
// TODO Auto-generated method stub
}
}

Then add filter configuration in web.xml

<filter>
  <filter-name>crossDomainFilter</filter-name>
  <filter-class>org.smartsoft.core.servlet.CrossDomainFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>crossDomainFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

Ok, so you can access the B system from the A system interface.

Tip, if the called B system does not support cross-domain, then this method is invalid!

2. Form

Whether you use IFrame or href + target = "_blank" to play the new interface, you can directly call the content of the B interface.

So this is a very safe way. Many plug-ins cross-domain way is to use a hidden iframe to load the B interface, and then use javascript to write it back.

3. Script method

The most famous ajax on the Internet uses the jsonp method, which is the script method. The principle is to dynamically connect the interface to be loaded on the A interface, write a script tag, connect it as javascript content, and then call it after the script is loaded. This way is suitable for B interface is pure javascript or json data. If it is interface html, xml is not applicable.

The above are the most frequently used front-end cross-domain calls. If the new html5 is only A, B interface communication, then use the postmessage method.

Distributed system cross-domain call problem

Guess you like