SpringBoot actual combat e-commerce project mall (18K + STAR) Address: github.com/macrozheng/…

Abstract

Cross-domain resource sharing (CORS) is a common problem in front – and back-end separated projects. This article focuses on how to solve this problem when SpringBoot applications integrate SpringSecurity.

What is a cross-domain problem

CORS stands for Cross-origin Resource Sharing, which means cross-domain Resource Sharing. When a resource accesses another resource with a different domain name or a different port with the same domain name, a cross-domain request is made. If another resource does not allow cross-domain resource access at this point, that accessed resource will encounter cross-domain problems.

Cross domain problem presentation and resolution

We use the mall project source code to demonstrate cross-domain problems. In this case, the front-end code runs on port 8090 and the back-end code runs on port 8080. The domain names are both localhost, but the front-end and back-end running ports are inconsistent. In this case, cross-domain problems occur when the front-end accesses the back-end interface.

Click the front-end login button

A cross-domain problem occurs when the login interface is invoked.

Override the default CorsFilter to solve the problem

Add the GlobalCorsConfig configuration file to allow cross-domain access.

package com.macro.mall.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/** * Global cross-domain configuration * Created by macro on 2019/7/27
@Configuration
public class GlobalCorsConfig {

    /** * filters that allow cross-domain calls */
    @Bean
    public CorsFilter corsFilter(a) {
        CorsConfiguration config = new CorsConfiguration();
        // Allow all domain names to make cross-domain calls
        config.addAllowedOrigin("*");
        // Allow cookies to be sent across
        config.setAllowCredentials(true);
        // Release all original headers
        config.addAllowedHeader("*");
        // Allow all request methods to be invoked across domains
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/ * *", config);
        return newCorsFilter(source); }}Copy the code

Rerun the code and click the login button

It was found that the OPTIONS request of /admin/info interface, which requires login authentication, could not pass authentication. That is because complex cross requests require an OPTIONS request to be pre-checked. Our application integrates SpringSecurity and does not allow login authentication for OPTIONS requests.

Set SpringSecurity to allow OPTIONS to request access

Add the following code to the configure(HttpSecurity HttpSecurity) method of the SecurityConfig class.

.antMatchers(HttpMethod.OPTIONS)// Cross-domain requests start with an options request
.permitAll()
Copy the code

Rerun the code and click the login button

The access is normal. Procedure

A complete cross-domain request

Make an OPTIONS request to precheck

  • Request header information:
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Origin: http://localhost:8090
Referer: http://localhost:8090/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
Copy the code
  • Response header information:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: http://localhost:8090
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Length: 0
Date: Sat, 27 Jul 2019 13:40:32 GMT
Expires: 0
Pragma: no-cache
Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
Copy the code
  • The status code returned is 200

Initiate a real cross-domain request

  • Request header information:
Accept: application/json, text/plain, */* Content-Type: application/json; Charset =UTF-8 Origin: http://localhost:8090 Referer: http://localhost:8090/ User-agent: Mozilla/5.0 (Windows NT 10.0; Win64; X64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36 {username: "admin", password: "123456"} password: "123456" username: "admin"Copy the code
  • Response header information:
Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: http://localhost:8090 Cache-Control: no-cache, no-store, max-age=0, must-revalidate Content-Type: application/json; charset=UTF-8 Date: Sat, 27 Jul 2019 13:40:32 GMT Expires: 0 Pragma: no-cache Transfer-Encoding: chunked Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers X-Content-Type-Options: nosniff X-Frame-Options: DENY X-XSS-Protection: 1; mode=blockCopy the code
  • The status code returned is 200

Project source code address

Github.com/macrozheng/…

The public,

Mall project full set of learning tutorials serialized, attention to the public number the first time access.