跨域问题的常见解决方案

旧城等待， 2024-04-03 13:01 92阅读 0赞

## 跨域问题的常见解决方案 ##

### 1 什么是跨域 ###

> 跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 javascript 施加的安全限制。

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。  
![在这里插入图片描述][0ce31f0477a4414186c00b04f82b8364.png]  
跨域问题可以由前端解决，也可以用后端解决。前端常见解决方案是jsonp，此处不再讲述。

### 2 常见的后端解决办法 ###

#### 2.1 Nginx+@CrossOrign ####

##### ①找到nginx.conf模块，配置代理 #####

![在这里插入图片描述][fbe75bd2030445dbb904fe5ac2872d16.png]

> 在http模块下添加代理

![在这里插入图片描述][08448e874ec34be08d0e18e19b5587d6.png]

##### ②在后端的服务启动类上添加注解@CrossOrign #####

@RestController
    @RequestMapping("/admin/hosp/department")
    @CrossOrigin
    public class DepartmentController {
        
    	...
    }

#### 2.2 使用SpringCloudGateway网关统一配置允许跨域 ####

##### ①导入依赖 #####

> 此处我是将网关服务注册在nacos上

<dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-gateway</artifactId>
        <version>2.2.7.RELEASE</version>
    </dependency>
    
    
    <dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        <version>2.2.5.RELEASE</version>
    </dependency>

##### ②编写配置类CorsConfig #####

配置类：

@Configuration
    public class CorsConfig {
        
        @Bean
        public CorsWebFilter corsFilter() {
        
            CorsConfiguration config = new CorsConfiguration();
            config.addAllowedMethod("*");
            config.addAllowedOrigin("*");
            config.addAllowedHeader("*");
    
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
            source.registerCorsConfiguration("/**", config);
    
            return new CorsWebFilter(source);
        }
    }

启动类：

@SpringBootApplication
    public class ServerGatewayApplication {
        
    
        public static void main(String[] args) {
        
            SpringApplication.run(ServerGatewayApplication.class, args);
        }
    }

##### ③编写配置文件 #####

# 服务端口
    server.port=80
    # 服务名
    spring.application.name=service-gateway
    
    # nacos服务地址
    spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848
    
    #使用服务发现路由
    spring.cloud.gateway.discovery.locator.enabled=true
    
    #设置路由id
    spring.cloud.gateway.routes[0].id=service-hosp
    #设置路由的uri
    spring.cloud.gateway.routes[0].uri=lb://service-hosp
    #设置路由断言,代理servicerId为auth-service的/auth/路径
    spring.cloud.gateway.routes[0].predicates= Path=/*/hosp/**
    
    #设置路由id
    spring.cloud.gateway.routes[1].id=service-cmn
    #设置路由的uri
    spring.cloud.gateway.routes[1].uri=lb://service-cmn
    #设置路由断言,代理servicerId为auth-service的/auth/路径
    spring.cloud.gateway.routes[1].predicates= Path=/*/cmn/**
    
    
    
    #设置路由id
    spring.cloud.gateway.routes[2].id=service-user
    #设置路由的uri
    spring.cloud.gateway.routes[2].uri=lb://service-user
    #设置路由断言,代理servicerId为auth-service的/auth/路径
    spring.cloud.gateway.routes[2].predicates= Path=/*/user/**

##### ④项目整体模块图 #####

![在这里插入图片描述][3bdf00e70b5f489795b177f98cdfb4f9.png]

#### 2.3 通过编写SpringBoot配置类 ####

@Configuration
    public class WebMvcConfig extends WebMvcConfigurerAdapter {
        
        @Override
        public void addCorsMappings(CorsRegistry registry) {
        
            registry.addMapping("/**") //允许哪些路径
                    .allowedOrigins("*") //允许哪些网站跨域访问
                    .allowedMethods("*") //允许哪些方法
                    .allowCredentials(true); //是否需要验证
        }
    }

感兴趣的朋友可以看看这篇文章：https://cloud.tencent.com/developer/article/1953193

[0ce31f0477a4414186c00b04f82b8364.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c2901d058f45401a895e37c52db26e78.png
[fbe75bd2030445dbb904fe5ac2872d16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/28c33d4b80ca48668fee0d4c5632394d.png
[08448e874ec34be08d0e18e19b5587d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/2e7cbb3c09ba4c92a6a38356163c3642.png
[3bdf00e70b5f489795b177f98cdfb4f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/9691b7410df0453182b4ad52b4af1b53.png