springboot configuration cross-domain problem

             When building a project by myself recently, I encountered a cross-domain problem. Our previous project solved cross-domain by adding a cross-domain annotation @CrossOrigin(allowCredentials = "true") on the controller, which is very convenient. But in the project I built myself, an error was reported at startup, the error is as follows:

When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" response header. To allow credentials to a set of origins, list them explicitly or consider using "allowedOriginPatterns" instead.

This is very strange, why can't it be used directly?

The error probably means:

When allowCredentials is true, allowedOrigin MUST NOT contain the special value "*" because it cannot be set in the "Access-Control-Origin" response header. To allow credentials to a set of origins, list them explicitly, or consider using "allowedOriginPatterns" instead.

It turned out that the previous project springboot was 2.1, and the project I built myself used springboot2.7 version. According to the error message, you can change it to the following.

@CrossOrigin(allowCredentials = "true",originPatterns = "/**")

The reason is that after springboot2.4, origins are not allowed to contain special value asterisks .

As can be seen from the source code of the annotation @CrossOrigin, origins default to *

By looking at the source code, I think it is OK to write like this, such as:

@CrossOrigin(allowCredentials = "true",origins = "http://localhost:8010/")

So far, the problem of cross-domain error reporting has been solved.

In fact, there are two ways to solve cross-domain, one is to use annotations, and the other is to write a configuration class. Each has its own advantages and disadvantages. Cross-domain annotations need to be annotated on the corresponding controller, and the configuration class can be written only once.

The first way: using annotations

@CrossOrigin(allowCredentials = "true",origins = "http://localhost:8010/")

//@CrossOrigin(allowCredentials = "true",originPatterns = "/**")

Both of these annotations can be

The second way: configuration class

package com.lsl.exam.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 跨域配置WebMvcConfig
 */
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    /**
     * 配置跨域
     * allowedOriginPatterns 和 allowedOrigins都是配置跨域请求来源的,
     * 前者支持通配符,后者不支持通配符,只能字符串
     * 取其一种即可
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")//配置当前项目哪些路径支持跨域。这是所有路径都支持跨域
//                .allowedOriginPatterns("*")//配置跨域请求来源。通配符配置方式。这是所有请求来源都可以
                .allowedOrigins("http://localhost:8010","http://www.exam.com:8010")//配置跨域请求来源,字符串配置，配置这有这2个请求来源的跨域请求访问
                .allowedMethods("GET","POST")//设置允许所有请求方式
                .allowedHeaders("*")//设置允许的header
                .allowCredentials(true)//设置是否发送cookie信息
                .maxAge(3600);
    }
}

 The difference between allowedOriginPatterns and allowedOrigins?

     Both allowedOriginPatterns and allowedOrigins are used to set the sources that allow cross-domain requests , where allowedOriginPatterns is a new method introduced in Spring 5.3, and allowedOrigins is a method in the old version.

        Their main difference is usage and matching rules. The allowedOrigins method uses string matching , that is, only specific cross-domain sources can be specified, and wildcards cannot be used; the allowedOriginPatterns method uses Ant-style path matching rules, and wildcards can be used to match multiple sources

For example, if your front-end application needs to obtain data from two different sources: http://localhost:8080 and https://www.exam.com, you can configure allowedOrigins like this

registry.addMapping("/**")
        .allowedOrigins("http://localhost:8080", "https://www.exam.com")
        .allowedMethods("GET", "POST")
        .allowCredentials(true)
        .maxAge(3600);

        This code indicates that cross-origin requests from http://localhost:8080 and https://www.exam.com are allowed to access any request path, the allowed HTTP methods include GET and POST, and enable to allow sending credentials , the cache time for preflight requests is 1 hour.

Using the allowedOriginPatterns method can be configured like this:

        

registry.addMapping("/**")
        .allowedOriginPatterns("http://localhost:*", "https://*.exam.com")
        .allowedMethods("GET", "POST")
        .allowCredentials(true)
        .maxAge(3600);

        This code means that cross-domain requests from any port starting with http://localhost: and any second-level domain name starting with https:// and ending with .exam.com are allowed to access any request path, allowed HTTP method Including GET and POST, enable to allow sending credentials, cache time for preflight requests is 1 hour.