Common cross-domain processing scenarios

Cross domain

The same origin policy restriction of the browser. The same origin policy is a convention. It is the core and most basic security function of the browser. If the same origin policy is absent, the normal functions of the browser may be affected. The same origin policy prevents javascript scripts in one domain from interacting with content in another domain. Homology (that is, in the same domain) means that two pages have the same protocol, host, and port number

• When a request URL protocol, domain name, port between any of the three different from the current page is cross-domain

Treatment scheme

• Set up the proxy on the front end. In SpringBoot + Vue background management system (a) : create a project at the end of the article is used.

• Add an Interceptor/Filter to the server to set the Header. Example:

• Interceptor

  public class CORSInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String Origin = request.getHeader("Origin"); response.setHeader("Access-Control-Allow-Origin", Origin); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Headers", "Authorization,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type"); response.setHeader("Access-Control-Allow-Methods", "OPTIONS,GET,POST,DELETE,PUT"); if(request.getMethod().equals("OPTIONS")) { response.setStatus(200); return false; } return true; } @Override public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception { } @Override public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {}} // Add Configuration bean@Configuration public class WebMvcConfig implements WebMvcConfigurer { @Bean public CORSInterceptor corsInterceptor() { return new CORSInterceptor(); } @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(corsInterceptor()) .addPathPatterns("/**"); }}Copy the code

• Filter

    @Component
    public class CORSFilter implements Filter {
     
        @Override
        public void destroy() { }
     
        @Override
        public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
                throws IOException, ServletException {
        	HttpServletRequest httpServletRequest = (HttpServletRequest)request;
        	String origin = httpServletRequest.getHeader("Origin");
            HttpServletResponse  httpServletResponse = (HttpServletResponse) response;
            httpServletResponse.setHeader("Access-Control-Allow-Origin", origin);
            httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
            httpServletResponse.setHeader("Access-Control-Allow-Headers", "Authorization,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type"); 
            httpServletResponse.setHeader("Access-Control-Allow-Methods", "OPTIONS,GET,POST,DELETE,PUT"); 
            if(httpServletRequest.getMethod().equals("OPTIONS")) {
            	httpServletResponse.setStatus(200);
            }
            chain.doFilter(httpServletRequest, httpServletResponse);    
        }
     
        @Override
        public void init(FilterConfig arg0) throws ServletException { }
     }
  Copy the code

• Nginx proxy

  Location/webView {# Note: if () {} space must be added. if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin $http_origin always; add_header Access-Control-Allow-Credentials true; add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS; add_header Access-Control-Allow-Headers Authorization,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type; return 200; } alias /mypro/webview/dist; try_files $uri $uri/ @webview; index index.html index.htm; add_header Access-Control-Allow-Origin $http_origin always; add_header Access-Control-Allow-Credentials true; add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS; add_header Access-Control-Allow-Headers Authorization,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type; } location @webview{ rewrite ^.*$ /webview/index.html last; }Copy the code

Summary: Resolve cross-domain access – modify the response header. Note: Sources do not use * matching symbols; Wildcard * cannot be used if cookie is allowed