跨域 CORS 解决

解决浏览器跨域问题的常用方法

在开发 Web 应用程序时，经常会遇到浏览器跨域问题。本文将介绍什么是跨域，以及几种常用的解决方案。

什么是跨域？

跨域是指在浏览器中，当前页面的域与请求的资源的域不一致的情况。浏览器出于安全考虑，限制了跨域资源的访问，这会导致一些网络请求失败或受限。

跨域问题是由浏览器的同源策略引起的。同源策略要求浏览器在默认情况下只能向同一域名、端口和协议发送请求。如果请求的目标与当前页面的域不一致，就会触发跨域限制。

使用 Spring Boot 注解配置跨域

在 Spring Boot 中，可以使用注解的方式实现Spring Boot的跨域配置，可以通过@CrossOrigin注解在Controller 类或方法上进行配置。下面是一个示例代码：

@RestController
@CrossOrigin(origins = "*", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT, RequestMethod.DELETE})
public class MyController {

    @GetMapping("/api/data")
    public ResponseEntity<String> getData() {
        // 处理业务逻辑
        return ResponseEntity.ok("Data retrieved successfully");
    }

    @PostMapping("/api/save")
    public ResponseEntity<String> saveData(@RequestBody DataDTO dataDTO) {
        // 处理业务逻辑
        return ResponseEntity.ok("Data saved successfully");
    }

    // 其他方法...
}

在上面的示例代码中，通过在Controller类上添加@CrossOrigin注解，并设置origins属性为"*"表示允许来自任意域名的跨域请求。使用methods属性设置允许的请求方法，这里设置了 GET、POST、PUT 和 DELETE。

还可以根据需要在具体的方法上添加@CrossOrigin注解进行更细粒度的跨域配置。例如，在getData方法上添加@CrossOrigin注解，可以对该方法进行单独的跨域配置。

请根据实际需求选择合适的方式进行跨域配置。

使用 Spring Boot 配置全局跨域

除了在单个 Controller 或方法上使用 @CrossOrigin 注解，还可以在 Spring Boot 的全局配置中启用跨域支持。下面是一个示例代码：

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 设置允许跨域的路径
            .allowedOrigins("*") // 设置允许跨域请求的域名
            .allowedMethods("GET", "POST", "PUT", "DELETE") // 设置允许的请求方法
            .allowedHeaders("*") // 设置允许的请求头
            .allowCredentials(true) // 是否允许发送Cookie
            .maxAge(3600); // 预检请求的有效期，单位为秒
    }
}

在上述示例中，通过实现 WebMvcConfigurer 接口并重写 addCorsMappings 方法来配置全局的跨域设置。通过 addMapping 方法指定了允许跨域访问的路径，allowedOrigins 属性指定了允许的来源域，allowedMethods 属性指定了允许的 HTTP 方法，allowCredentials 属性指定了是否允许发送 Cookie，maxAge 属性指定了响应的缓存时间。

使用 NGINX 反向代理解决跨域

另一种常见的解决方案是使用 NGINX 反向代理。通过配置 NGINX 服务器，可以将跨域请求转发到后端服务器，从而绕过浏览器的同源策略限制。

以下是一个示例的 NGINX 配置：

server {
    listen 80;
    server_name example.com;

    location /api {
        # 设置代理目标地址
        proxy_pass http://backend-server:8080;

        # 处理跨域请求的响应头
        add_header 'Access-Control-Allow-Origin' '$http_origin' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Max-Age' 3600 always;

        # 处理 OPTIONS 请求的返回
        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }
}

在上面的配置中，将 NGINX 配置为监听80端口，并将所有以 /api 开头的请求代理到后端服务器（http://backend-server:8080）。

同时，设置了跨域请求的响应头信息，包括允许的源（Access-Control-Allow-Origin）、方法（Access-Control-Allow-Methods）、请求头（Access-Control-Allow-Headers）、是否允许携带凭证（Access-Control-Allow-Credentials）以及预检请求的最大缓存时间（Access-Control-Max-Age）。

最后，通过判断请求方法是否为 OPTIONS 来处理预检请求的返回，如果是 OPTIONS 请求，则返回204（No Content）。

请根据实际情况修改配置文件中的域名、代理地址等参数，并将其应用于 NGINX 服务器。这样就可以通过 NGINX 反向代理来解决跨域问题。

使用 Vue 代理解决跨域

如果正在开发使用 Vue 框架的前端应用程序，可以使用 Vue 的代理功能来解决跨域问题。

在 Vue 中使用代理来解决跨域问题可以通过配置 vue.config.js 文件来实现。以下是一个示例的 vue.config.js 文件，演示了如何配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-server:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

在上述示例中，我们将所有以 /api 开头的请求代理到后端服务器（http://backend-server:8080）。配置中的 changeOrigin 选项用于控制是否改变请求的来源，默认为 false，设置为 true 时将修改请求头中的 Origin 字段为目标地址。

pathRewrite 选项用于重写请求路径，将 /api 替换为空字符串，即去掉 /api 前缀。

请根据实际情况修改配置中的代理目标地址以及路径重写规则，并将 vue.config.js 文件放置在 Vue 项目的根目录中。在开发环境下启动 Vue 项目时，代理配置将会生效，使得跨域请求转发到后端服务器。

请确保已安装 http-proxy-middleware 依赖，可以通过以下命令进行安装：

npm install http-proxy-middleware --save-dev

这样就可以使用 Vue 代理来解决跨域问题。

---

希望这篇技术博客能帮助理解和解决浏览器跨域问题。根据实际需求，可以选择适合的解决方案。