前后端跨域解决方案

太过爱你忘了你带给我的痛 2024-03-24 06:09 40阅读 0赞

#### 目录 ####

*   *  一、为什么会有跨域问题
     *  二、解决跨域方案有哪些
     *  三、解决跨域最佳方案是什么
     *  四、Spring中如何引入CORS

### 一、为什么会有跨域问题 ###

`跨域问题是由于浏览器的同源策略导致的`。同源策略是一种安全策略，它限制了一个源的文档或脚本如何能够与另一个源的资源进行交互。同源指的是协议、域名、端口号都相同。例如，一个页面从 http://www.example.com 加载了一段 JavaScript 代码，那么该页面就只能与 http://www.example.com 同源的资源进行交互，而不能与其他域名的资源进行交互。

在前后端分离的开发模式下，前端代码通常运行在一个独立的域名下，而后端接口则运行在另一个独立的域名下。这时，由于浏览器的同源策略限制，前端代码无法直接访问后端接口，从而导致了跨域问题。

例如，在前端代码中使用 Ajax 请求后端接口时，如果前端代码和后端接口不在同一个域名下，`浏览器就会阻止这种跨域请求`，从而导致请求失败。为了解决跨域问题，需要通过一些手段来绕过浏览器的同源策略，例如使用 JSONP、CORS、代理服务器等跨域解决方案。

### 二、解决跨域方案有哪些 ###

1.  JSONP：通过在前端页面中添加一个 script 标签，来加载一个位于其他域名下的 JavaScript 文件，由于 JSONP的回调函数是在全局范围内执行的，因此可以在回调函数中直接操作数据。但是 JSONP 只支持 GET 请求，不支持 POST等其他请求方法。
2.  CORS（跨域资源共享）：CORS 是一种跨域解决方案，它是 W3C 标准，通过`在服务器端设置响应头中的Access-Control-Allow-Origin` 字段来告诉浏览器是否允许跨域访问。CORS 支持各种类型的 HTTP请求方法，比 JSONP 更加灵活。
3.  代理服务器：在前端页面和后端接口之间设置一个代理服务器，`前端页面向代理服务器发送请求，代理服务器再将请求转发到后端接口`，代理服务器在响应中添加Access-Control-Allow-Origin 头部，从而绕过浏览器的同源策略。
4.  WebSocket：WebSocket是一种全双工通信协议，它能够在客户端和服务器之间建立一个持久性的连接，在这个连接上双方可以随时发送或接收数据。WebSocket协议不受同源策略的限制，因此可以在跨域的情况下进行通信。
5.  postMessage：可以使用 HTML5 中提供的 postMessage API，在不同的窗口之间传递数据，即使这些窗口来自不同的源，也可以实现跨域通信。

总之，不同的跨域场景可能需要采用不同的解决方案，需要根据具体情况选择合适的跨域解决方案。

### 三、解决跨域最佳方案是什么 ###

`前后端解决跨域的最佳方案是使用 CORS`（Cross-Origin Resource Sharing）跨域资源共享协议。CORS 是一种跨域解决方案，它通过在服务器端设置响应头中的 Access-Control-Allow-Origin 字段来告诉浏览器是否允许跨域访问。相比于 JSONP 和代理服务器等其他跨域解决方案，CORS 具有如下优点：

*  安全性更高。使用 JSONP 和代理服务器等其他跨域解决方案可能存在安全隐患，而使用 CORS 可以通过设置响应头中的  
    Access-Control-Allow-Origin 字段来控制哪些域名可以访问接口，从而提高安全性。
 *  简单易用。相比于其他跨域解决方案，使用 CORS 只需要在服务器端设置一下响应头，就可以轻松解决跨域问题，而且前端代码无需做任何修改。
 *  支持所有类型的 HTTP 请求。与 JSONP 只支持 GET 请求不同，CORS 支持所有类型的 HTTP 请求，包括  
    GET、POST、PUT、DELETE、PATCH 等。

使用 CORS 进行跨域的具体步骤如下：

1、在服务器端设置响应头中的 Access-Control-Allow-Origin 字段，允许指定的域名进行跨域访问。例如，设置允许 http://localhost:8080 域名进行跨域访问：

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");

2、在服务器端设置响应头中的 Access-Control-Allow-Methods 字段，允许指定的 HTTP 请求方法进行跨域访问。例如，设置允许 GET、POST、PUT、DELETE、PATCH 等请求方法进行跨域访问：

response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH");

3、在服务器端设置响应头中的 Access-Control-Allow-Headers 字段，允许指定的请求头进行跨域访问。例如，设置允许 Content-Type、Authorization 等请求头进行跨域访问：

response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");

综上所述，使用 CORS 是前后端解决跨域问题的最佳方案，它具有安全性高、简单易用、支持所有类型的 HTTP 请求等优点，可以满足大部分跨域场景的需求。

### 四、Spring中如何引入CORS ###

**方法1**  
添加 CorsConfigurationSource Bean：在 Spring Boot 项目中，可以通过添加 CorsConfigurationSource Bean 来配置 CORS，例如：

@Configuration
    public class CorsConfig {
        
        @Bean
        public CorsConfigurationSource corsConfigurationSource() {
        
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            corsConfiguration.addAllowedOrigin("*");
            corsConfiguration.addAllowedHeader("*");
            corsConfiguration.addAllowedMethod("*");
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**", corsConfiguration);
            return source;
        }
    }

上述代码中，我们创建了一个 CorsConfiguration 对象，并设置了允许所有域名（\*）、所有请求头和所有请求方法。然后将 CorsConfiguration 对象注册到 UrlBasedCorsConfigurationSource 中，并设置拦截所有请求路径（/\*\*），最后将 UrlBasedCorsConfigurationSource 对象返回。

**方法2**  
启用 CORS 配置：在 Spring Boot 项目中，可以通过添加 @CrossOrigin 注解或者配置 WebMvcConfigurer Bean 来启用 CORS 配置。例如：  
添加 @CrossOrigin 注解

@RestController
    @RequestMapping("/api")
    @CrossOrigin(origins = "*", allowedHeaders = "*", methods = {
        RequestMethod.GET, RequestMethod.POST})
    public class ApiController {
        
        // controller code here
    }

上述代码中，我们在 ApiController 类上添加了 @CrossOrigin 注解，并设置了允许所有域名（\*）、所有请求头和 GET、POST 请求方法。

**方法3**  
配置 WebMvcConfigurer Bean

@Configuration
    public class WebMvcConfig implements WebMvcConfigurer {
        
        @Override
        public void addCorsMappings(CorsRegistry registry) {
        
            registry.addMapping("/api/**")
                    .allowedOrigins("*")
                    .allowedHeaders("*")
                    .allowedMethods("GET", "POST");
        }
    }

上述代码中，我们创建了一个 WebMvcConfigurer Bean，并重写了其中的 addCorsMappings 方法，设置了拦截 /api/\*\* 路径的请求，允许所有域名（\*）、所有请求头和 GET、POST 请求方法。

通过上述步骤，我们就可以在 Spring Boot 项目中利用 CORS 解决跨域问题，从而实现前后端数据交互。