Cross domain Problems, Solutions – CORS Solutions Blog: blog.720uenterp rise

Cross domain problem, solution

Linked articles: Cross domain problems, solutions

solution

CORS stands for Cross Origin Resource Sharing. The entire CORS communication process is completed automatically by the browser without user participation. For developers, CORS communication is no different from same-origin AJAX communication, and the code is exactly the same. As soon as the browser discovers that AJAX requests cross sources, it automatically adds some additional header information, but the user doesn’t feel it. Therefore, the key to CORS communication is the server side. The server only needs to add the relevant response header information to enable the client to make the AJAX cross-domain request.

It is important to note that the browser must first send a pre-request in the form of an OPTIONS request to know what HTTP methods the server supports for cross-source requests. With confirmation that the server allows the cross-source request, send the real request in the actual HTTP request method.

CORS refers to the response header

Access-Control-Allow-Origin

The client domain name that is allowed to be accessed, for example, blog.720ui.com, is marked with a star, indicating that it can be accessed from any domain. Note that access-Control-allow-origin allows only two values, a star and a specific domain name. Multiple domain names cannot be configured at the same time.

Access-Control-Allow-Methods

Allow access to the name of the method, multiple methods of comma separated, such as GET, POST, PUT, DELETE, OPTIONS.

Access-Control-Allow-Credentials

Whether to allow requests with authentication information. To obtain cookies in the client domain, set it to true.

Access-Control-Max-Age

Caches that can be used for CORS related configurations.

Access-Control-Allow-Headers

Multiple request headers are separated by commas, for example, Content-type.

Resolve cross-domain problems

First, we need to write a Filter that filters all HTTP requests and writes the CORS response header into the Response object.

public class CORSFilter implements Filter {  
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
        HttpServletResponse response = (HttpServletResponse) res;  
        response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods",
        "GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, PATCH");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", 
        "Origin, Accept, X-Requested-With, Content-Type, 
        Access-Control-Request-Method, Access-Control-Request-Headers, 
        Authorization, Cache-control");  
        chain.doFilter(req, res);  
    }  

    public void init(FilterConfig filterConfig) {}  

    public void destroy() {}  

}Copy the code

Then, configure the CorsFilter filter in web.xml.

<filter> <filter-name>corsFilter&lt; /filter-name> <filter-class>com.lianggzone.core.filter.CorsFilter&lt; /filter-class> </filter> <filter-mapping> <filter-name>corsFilter&lt; /filter-name> <url-pattern>/*&lt; /url-pattern> </filter-mapping>Copy the code

Complete the above two steps to achieve cross-domain functionality. The problem of crossing multiple domains is easily solved.

There is a problem

Unfortunately, CORS does not support IE8 or IE9. If the product is not compatible with lower versions of IE, it can be ignored, but if the product needs to be compatible with a large number of lower versions of IE in the domestic market (more than 20 percent), then this should be considered carefully.

(after)

More wonderful articles, all in the “server-side thinking” wechat public account!