跨域

=====后端解决方案====

一，跨域产生的原因
之所以产生跨域主要是因为浏览器同源策略的限制。同源策略，它是由NetSpace提出的一个著名的安全策略。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

二，什么情况下算跨域
一个域名地址由以下几个部分组成：
http://www.aaa.com:8080/sie=UTF-8&wd=SpringBoot

协议：http
域名：子域名www，主域名aaa.com
端口：8080
从一个域名的网页去请求另一个域名的资源时，协议，域名，端口任意不同，都会出现跨域问题。
http://www.aaa.com:8080——>http://www.aaa.com:8080：同域访问
http://www.aaa.com:8080——>http://www.bbb.com:8080：跨域访问
尤其是在前后端分离的开发模式下，跨域请求是避免不了的。

三、解决跨域的方法

解决跨域问题方案

跨域问题可以从以下方面解决：

应用层面解决：例如 Spring Boot 项目中解决跨域问题。
反向代理解决：例如 Nginx 中解决跨域问题。
网关中解决：例如 Spring Cloud Gateway 中解决跨域问题。

而这 3 类解决方案，总共包含了 8 种解决方案，一起来看。

1.Spring Boot 中解决跨域

在 Spring Boot 中跨域问题有以下 5 种解决方案：

使用 @CrossOrigin 注解实现跨域【局域类跨域】
通过配置文件实现跨域【全局跨域】
通过 CorsFilter 对象实现跨域【全局跨域】
通过 Response 对象实现跨域【局域方法跨域】
通过实现 ResponseBodyAdvice 实现跨域【全局跨域】

1，@CrossOrigin注解

我们可以在特定的某些接口加上@CrossOrigin注解，表示该接口允许跨域访问。注：未加该注解的接口仍不允许跨域访问

@PostMapping("/login")
@CrossOrigin
public Result loginSystem(@RequestBody LoginUser user) {
if (StringUtils.isBlank(user.getUserAccount()) || StringUtils.isBlank(user.getPassword())) {
return Result.error(Constants.CODE_400, "参数错误");
}

TickToken tickToken = ILoginService.loginSystem(user);

return Result.success(tickToken);
}

@CrossOrigin注解中的origins还可设置域名，表示只有该域名访问时允许跨域，如：@CrossOrigin(origins =“http://localhost:7060”)；
若origins未设置值，表示所有域名都可以跨域访问该接口

2，添加全局过滤器

若项目中所有接口都允许跨域访问，可增加全局过滤器允许跨域访问。

mport org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
// 当前跨域请求最大有效时长。这里默认1天
private static final long MAX_AGE = 24 * 60 * 60;

@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址，或者http://localhost:7060
corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法，或设置为"GET", "POST", "DELETE", "PUT"
corsConfiguration.setMaxAge(MAX_AGE);
source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
return new CorsFilter(source);
}
}

3，实现WebMvcConfigurer

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
// 当前跨域请求最大有效时长。这里默认1天
private static final long MAX_AGE = 24 * 60 * 60;

@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*")
.maxAge(MAX_AGE);
}
}

4，Nginx解决跨域

如果项目中有使用Nginx来转发请求，那也可以交由Nginx来解决跨域，但是有一点需要注意：Nginx解决跨域和后端解决跨域最好只保留一个，两种混用会出现很多奇怪的问题。
下面是nginx.conf文件解决跨域的相关配置：

server {
listen 80;
server_name localhost;
location / {
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin 'http://localhost:7060';
add_header Access-Control-Allow-Headers '*';
add_header Access-Control-Allow-Methods '*';
add_header Access-Control-Allow-Credentials 'true';
return 204;
}
if ($request_method != 'OPTIONS') {
add_header Access-Control-Allow-Origin 'http://localhost:7060' always;
add_header Access-Control-Allow-Credentials 'true';
}
proxy_pass http://localhost:59200;
}
}

==============》

server {
listen 80;
server_name your_domain.com;
location /api {
# 允许跨域请求的域名，* 表示允许所有域名访问
add_header 'Access-Control-Allow-Origin' '*';

# 允许跨域请求的方法
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

# 允许跨域请求的自定义 Header
add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';

# 允许跨域请求的 Credential
add_header 'Access-Control-Allow-Credentials' 'true';

# 预检请求的存活时间，即 Options 请求的响应缓存时间
add_header 'Access-Control-Max-Age' 3600;

# 处理预检请求
if ($request_method = 'OPTIONS') {
return 204;
}
}
# 其他配置...
}

上述示例中，location /api 代表配置针对 /api 路径的请求进行跨域设置。可以根据具体需要修改 location 的值和其他相关参数。配置中的 add_header 指令用于设置响应头部，常用的响应头部包括以下这些：

Access-Control-Allow-Origin：用于指定允许跨域的域名，可以设置为 * 表示允许所有域名访问。
Access-Control-Allow-Methods：用于指定允许的跨域请求的方法，例如 GET、POST、OPTIONS 等。
Access-Control-Allow-Headers：用于指定允许的跨域请求的自定义 Header。
Access-Control-Allow-Credentials：用于指定是否允许跨域请求发送和接收 Cookie。
Access-Control-Max-Age：用于设置预检请求（OPTIONS 请求）的响应缓存时间。

5，通过 Response 跨域

此方式是解决跨域问题最原始的方式，但它可以支持任意的 Spring Boot 版本（早期的 Spring Boot 版本也是支持的）。但此方式也是局部跨域，它应用的范围最小，设置的是方法级别的跨域，它的具体实现代码如下：

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.util.HashMap;
@RestController
public class TestController {
    @RequestMapping("/test")
    public HashMap<String, Object> test(HttpServletResponse response) {
        // 设置跨域
        response.setHeader("Access-Control-Allow-Origin", "*");
        return new HashMap<String, Object>() {{
            put("state", 200);
            put("data", "success");
            put("msg", "");
        }};
    }
}

6，通过 ResponseBodyAdvice 跨域

通过重写 ResponseBodyAdvice 接口中的 beforeBodyWrite（返回之前重写）方法，我们可以对所有的接口进行跨域设置，它的具体实现代码如下：

import org.springframework.core.MethodParameter;
import org.springframework.http.MediaType;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;

@ControllerAdvice
public class ResponseAdvice implements ResponseBodyAdvice {
    /**
     * 内容是否需要重写（通过此方法可以选择性部分控制器和方法进行重写）
     * 返回 true 表示重写
     */
    @Override
    public boolean supports(MethodParameter returnType, Class converterType) {
        return true;
    }
    /**
     * 方法返回之前调用此方法
     */
    @Override
    public Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType,
                                  Class selectedConverterType, ServerHttpRequest request,
                                  ServerHttpResponse response) {
        // 设置跨域
        response.getHeaders().set("Access-Control-Allow-Origin", "*");
        return body;
    }
}

此实现方式也是全局跨域，它对整个项目中的所有接口有效。

3.网关中解决跨域

Spring Cloud Gateway 中解决跨域问题可以通过以下两种方式实现：

通过在配置文件中配置跨域实现。
通过在框架中添加 CorsWebFilter 来解决跨域问题。

3.1 配置文件中设置跨域

在 application.yml 或 application.properties 中添加以下配置：

spring:
  cloud:
    gateway:
      globalcors:
        corsConfigurations:
          '[/**]': # 这里的'/**'表示对所有路由生效，可以根据需要调整为特定路径
            allowedOrigins: "*" # 允许所有的源地址，也可以指定具体的域名
            allowedMethods: # 允许的 HTTP 方法类型
              - GET
              - POST
              - PUT
              - DELETE
              - OPTIONS
            allowedHeaders: "*" # 允许所有的请求头，也可以指定具体的请求头
            allowCredentials: true # 是否允许携带凭证（cookies）
            maxAge: 3600 # CORS预检请求的有效期（秒）

其中：

allowedOrigins: 设置允许访问的来源域名列表，"*" 表示允许任何源。
allowedMethods: 指定哪些HTTP方法可以被用于跨域请求。
allowedHeaders: 客户端发送的请求头列表，"*" 表示允许任何请求头。
allowCredentials: 当设为 true 时，允许浏览器在发起跨域请求时携带认证信息（例如 cookies）。
maxAge: 预检请求的结果可以在客户端缓存的最大时间。

通过这样的配置，Spring Cloud Gateway 网关将自动处理所有经过它的跨域请求，并添加相应的响应头，从而允许前端应用执行跨域请求。

3.2 添加 CorsWebFilter 来解决跨域问题

在 Spring-Framework 从 5.3 版本之前，使用以下代码可以让 Spring Cloud Gateway 网关允许跨域：

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 这里仅为了说明问题，配置为放行所有域名，生产环境请对此进行修改
        config.addAllowedOrigin("*");
        // 放行的请求头
        config.addAllowedHeader("*");
        // 放行的请求类型，有 GET, POST, PUT, DELETE, OPTIONS
        config.addAllowedMethod("*"); 
        // 暴露头部信息
        config.addExposedHeader("*"); 
        // 是否允许发送 Cookie
        config.setAllowCredentials(true); 
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}

而 Spring-Framework 5.3 版本之后，关于 CORS 跨域配置类 CorsConfiguration 中将 addAllowedOrigin 方法名修改为 addAllowedOriginPattern，因此配置了变成了以下这样：

@Configuration
public class GlobalCorsConfig {

    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 这里仅为了说明问题，配置为放行所有域名，生产环境请对此进行修改
        config.addAllowedOriginPattern("*");
        // 放行的请求头
        config.addAllowedHeader("*");
        // 放行的请求类型，有 GET, POST, PUT, DELETE, OPTIONS
        config.addAllowedMethod("*"); 
        // 暴露头部信息
        config.addExposedHeader("*"); 
        // 是否允许发送 Cookie
        config.setAllowCredentials(true); 
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}

======前端解决方案=========

Vue开发环境解决方案
Webpack代理（推荐）
Vue CLI内置了Webpack DevServer的代理功能，适用于开发环境，将前端请求转发至后端服务，避开浏览器跨域限制。

配置步骤：

1.在项目根目录的 vue.config.js 中添加：

proxy: {
'/api': { // 匹配以/api开头的请求路径
target: 'http://api.example.com:3000', // 目标服务器地址
changeOrigin: true, // 修改请求头中的Origin为目标地址
pathRewrite: {
'^/api': '' // 重写路径：移除/api前缀
}
}
}
2.前端代码中发起请求：

axios.get('/api/data').then(response => {
console.log(response.data);
});
3.重启开发服务器，请求将被代理至 http://api.example.com:3000/data。

posted @ 2025-06-04 11:44 KLAPT 阅读(35) 评论(0) 收藏举报

刷新页面返回顶部

KLAPT

跨域