Cross-domain problem record: has been blocked by CORS policy_ The 'Access-Control-Allow-Origin'

Common problems:

has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’

problem causes:

Cross-domain: Refers to the fact that the browser cannot execute scripts from other websites. It is caused by the browser's same-origin policy , which is a security restriction imposed by the browser on javascript.

Same-origin policy: It means that the protocol, domain name, and port must be the same. If one of them is different, it will cause cross-domain (emphasis: the browser generates cross-domain)

problem screenshot:

The above two pictures are cross-domain problems caused by browser errors, but the problem is different: the first picture is not set cross-domain, and the second picture is multiple cross-domain settings, so no matter the front end or the back end, only Can set a layer of cross-domain

solution:

1. Take vue as an example for the front end (generally, it is more convenient for the back end to solve cross-domain problems, so that it will not be very troublesome when the project is deployed to the server). When developing locally, the front end can be in the vue.config.js in the project For configuration, the related examples are as follows:

  devServer: {
    // development server port 8000
    port: 8000,
    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
    proxy: {
      '/api': {
        target: 'http://192.168.92.11',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''                    
        }
      },
  },

2. Backend settings (emphasis: only one layer of cross-domain can be set)

(1) Gateway unified cross-domain configuration

@Configuration
public class GulimallCorsConfiguration {
    /**
     * 功能描述：网关统一配置允许跨域
     *
     * @author cakin
     * @date 2020/10/25
     * @return CorsWebFilter 跨域配置过滤器
     */
    @Bean
    public CorsWebFilter corsWebFilter(){
        // 跨域配置源
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 跨域配置
        CorsConfiguration corsConfiguration = new CorsConfiguration();
 
        // 1 配置跨域
        // 允许所有头进行跨域
        corsConfiguration.addAllowedHeader("*");
        // 允许所有请求方式进行跨域
        corsConfiguration.addAllowedMethod("*");
        // 允许所有请求来源进行跨域
        corsConfiguration.addAllowedOrigin("*");
        // 允许携带cookie进行跨域
        corsConfiguration.setAllowCredentials(true);
        // 2 任意路径都允许第1步配置的跨域
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(source);
    }
}

(2) Set cross-domain in the service: annotation @CrossOrigin

@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin
    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @DeleteMapping("/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

There are other solutions for cross-domain, it is important to know why the problem occurs and the train of thought to search for the problem