前后端跨域解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了前后端跨域解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、为什么会有跨域问题

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

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

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

二、解决跨域方案有哪些

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