Shulou(Shulou.com)06/01 Report--

This article mainly explains "Springboot how to solve the cross-domain request problem of Ajax custom headers", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "Springboot how to solve the cross-domain request problem of Ajax custom headers"!

1. What is cross-domain

Because of the browser homology policy (same-origin policy), it is a well-known security policy proposed by Netscape. All browsers that support JavaScript now use this policy. The so-called homology refers to the same domain name, protocol, port.), Any protocol, domain name or port that sends the URL request is different from the current page address.

See the table below for details:

2. How does springboot solve cross-domain problems

1. Common cross-domain request solutions:

① Request interface add annotation @CrossOrigin(origins = "http://127.0.0.1:8020", maxAge = 3600)

origins = "http://127.0.0.1:8020" The origins value is the domain from which the interface is currently requested.

② Universal configuration (all interfaces allow cross-domain requests)

Add a configuration class or add CorsFilter and CorsConfiguration methods to Application

@Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); // 1 Allow any domain name corsConfiguration.addAllowedHeader("*"); // 2 Allow any header corsConfiguration.addAllowedMethod("*"); // 3 Allow any method (post, get, etc.) return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/** ", buildConfig()); // 4 return new CorsFilter(source); } }

2. Cross-domain requests for Ajax custom headers

$.ajax({ type:"GET", url:"http://localhost:8766/main/currency/sginInState", dataType:"JSON", data:{ uid:userId }, beforeSend: function (XMLHttpRequest) { XMLHttpRequest.setRequestHeader("Authorization", access_token); }, success:function(res){ console.log(res.code) } })

At this time, the http://localhost:8766/main/currency/sginInState interface was requested and OPTIONS http://localhost:8766/main/currency/sginInState 500 error was found. Ordinary cross-domain solutions cannot solve this problem. Why does the OPTIONS request appear?

reason

The browser will send a preflight request with the method OPTIONS before sending the real request. This request is used to verify whether the request is safe, but not all requests will be sent. The following conditions need to be met:

·Request method is not GET/HEAD/POST

Content-Type of POST request is not application/x-www-form-urlencoded, multipart/form-data, or text/plain

·The request sets a custom header field

For the interface on the management side, I have permission verification for the interface. Each request needs to carry a custom field (token) in the header, so the browser will send an additional OPTIONS request to verify the security of this request.

Why is the OPTIONS request 500?

OPTIONS request will only carry custom fields, and will not bring the corresponding value into it, while the token field in the background check token is NULL, so the verification does not pass, throwing an exception.

So let's solve this problem:

① Spring boot project application.yml added

spring:

mvc:

dispatch-options-request: true

Note: This solution may not solve the OPTIONS problem in some cases, either because of environmental problems or because of complex custom filter configuration problems.

② Add filter configuration

Step 1: Handwriting RequestFilter Request Filter Configuration Class This class needs to implement the HandlerInterceptor class, which is under org.springframework.web.servlet.HandlerInterceptor

Specific code implementation:

@Componentpublic class RequestFilter implements HandlerInterceptor { public boolean preHandler(HttpServletRequest request,HttpServletResponse response,Object handler){ response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS"); response.setHeader("Access-Control-Max-Age", "86400"); response.setHeader("Access-Control-Allow-Headers", "Authorization"); //End if OPTIONS request if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) { response.setStatus(HttpStatus.NO_CONTENT.value()); return false; } return true; }}

Step 2: Handwriting MyWebConfiguration This class needs to inherit WebMvcConfigurationSupport.

Note: WebMvcConfigurationSupport is version 2.x and above, and version 1.x is WebMvcConfigurerAdapter.

Specific code implementation:

@Componentpublic class MyWebConfiguration extends WebMvcConfigurationSupport{ @Resource private RequestFilter requestFilter; @Override public void addInterceptors(InterceptorRegistry registry) { //Cross-domain interceptor registry.addInterceptor(requestFilter).addPathPatterns("/** "); }} At this point, I believe that everyone has a deeper understanding of"Springboot how to solve cross-domain requests for Ajax custom headers ". Let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.