The front cross-domain problem to solve cross-domain

Their front and rear ends engage a separate item, with the distal end ajax request, JSON data interaction. But the front-end interface to access the background there was a pit

“jquery-2.1.4.min.js:4 Access to XMLHttpRequest at 'localhost:8080/login?password=123456' from origin 'http://localhost:63342' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.”

This report has been wrong, understand cross-domain problem, because the front end of the front and rear ends of the splitter back-end resources are not together, because the same-origin policy so report this error.

Resolve them directly to write a cross-domain configuration filter in the background

 1 @Component
 2 public class CorsFilter implements Filter {
 3 
 4     @Override
 5     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
 6         HttpServletRequest request = (HttpServletRequest) servletRequest;
 7         HttpServletResponse response = (HttpServletResponse) servletResponse;
 8         response.setHeader("Access-Control-Allow-Origin", "*");
 9         response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT, GET");
10         response.setHeader("Access-Control-Max-Age", "3600");
11         response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
12         filterChain.doFilter(servletRequest, servletResponse);
13     }
14 }

Another visit to OK!

 

"The most important thing isAccess-Control-Allow-Origin，标识允许哪个域的请求。当然，如果服务器不通过，根本没有这个字段，接着触发XHR的onerror，再接着你就看到浏览器的提示xxx的服务器没有响应Access-Control-Allow-Origin字段”

// Specify allow other domain names 
' Access-Control-Allow-Origin : http: //172.20.0.206'// general usage (*, specify the domain, dynamic set), * 3 is not allowed because the authentication header and Cookies 
/ / whether to allow a subsequent request carries the authentication information (cookies), the value can only be true, otherwise it does not return 
'Access-Control-allow-Credentials : true'

Later in the book Jane saw an article I realized that the problem here! !

 

The front end was also to find a solution

 $.ajax({
                type:"GET",
                url:"http://localhost:8080/xxx",
		data:{},
                dataType: 'jsonp',
                crossDomain: true
            })
		}

DataType is set to jsonp, crossDomain set to true