SpringBoot 跨域问题：Access to XMLHttpRequest at ‘‘ from origin ‘‘ has been blocked by CORS policy

深碍√TFBOYSˉ_ 2022-12-13 11:18 248阅读 0赞

![20201010213505113.png_pic_center][]

Access to XMLHttpRequest at 'http://127.0.0.1:9002/business/admin/chapter/list' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS 跨站点资源分享，属于跨域问题，同个 IP 的不同端口间的访问也属于跨域。

前后端分离必然有跨域问题。

--------------------

## 一、SpringBoot项目 ##

对于 SpringBoot 项目，可以新建一个配置类：

package com.lsu.server.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    /** * 处理跨域问题 * * @Author wang suo * @Date 2020/10/10 0010 21:37 * @Version 1.0 */
    @Configuration
    public class CorsConfig implements WebMvcConfigurer { 
    
        @Override
        public void addCorsMappings(CorsRegistry registry) { 
            /* * 一小时内不需要再预检 */
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowCredentials(true)
                    .allowedHeaders(CorsConfiguration.ALL)
                    .allowedMethods(CorsConfiguration.ALL)
                    .maxAge(3600);
        }
    }

## 二、SpringCloud项目 ##

> 通过 spring cloud gateway 实现

### 2.1、代码实现 ###

如果项目中有`网关`，可以选择在主启动类中注册 `CorsWebFilter` 类：

/** * 1.允许cookies跨域 * 2.允许向该服务器提交请求的URI，*表示全部允许，在SpringMVC中，如果设成*，会自动转成当前请求头中的Origin * 3.允许访问的头信息,*表示全部 * 4.预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了 * 5.允许提交请求的方法，*表示全部允许 * * @return 返回 reactive 包下的 CorsWebFilter 对象 */
    @Bean
    public CorsWebFilter corsWebFilter() { 
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.setMaxAge(3600L);
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }

### 2.2、配置实现 ###

也可以在 `application.yml` 文件中做如下配置：

server:
      port: 9000
    
    spring:
      application:
        name: online-course-gateway
      cloud:
        nacos:
          discovery:
            server-addr: localhost:8848 #配置 Nacos 地址
        # 路由转发: 意思是只要是以 /system 开头的路径都转发到 9001: 这样就可以做到对外隐藏,表面上访问的是 9000 实际上是 9001
        gateway:
          routes:
            - id: system
              uri: lb://online-course-system
              predicates:
                - Path=/system/**
            - id: business
              uri: lb://online-course-business
              predicates:
                - Path=/business/**
          # 全局跨域
          globalcors:
            # 跨域配置(可以在代码里面处理允许跨域，也可在这里全局处理)
            corsConfigurations:
              '[/**]':
                allowedOrigins: "*"
                allowedHeaders: "*"
                allowCredentials: true
                allowedMethods:
                  - GET
                  - POST
                  - OPTIONS
                  - DELETE
                  - PUT
                  - HEAD
                  - PATCH

[20201010213505113.png_pic_center]: /images/20221123/d91043a7d7774896acf3be459825fb67.png