Spring-Cloud GateWay+Vue 跨域方案汇总

news2024/12/24 0:52:14

文章目录

- 一、简介
- - 背景和概述
- 二、前端跨域解决方案
- - Axios跨域
  - CORS跨域
- 三、后端跨域解决方案
- - 反向代理服务器
- 四、Spring Cloud中的跨域解决方案
- - Gateway网关的跨域配置
- 五、基于Vue和Spring Cloud的跨域整合实践
- **`这两种配置只需配置一种即可生效（前端or后端）`**
- - 前端Vue项目配置
  - 后端Spring Cloud项目配置
- 六、总结

一、简介

背景和概述

在开发Spring Cloud和Vue的项目时，涉及到前后端分离的情况下，跨域成为一个常见的问题。本文将介绍跨域问题的背景，并提供了一些解决方案。
在这里插入图片描述

二、前端跨域解决方案

Axios跨域

Axios是一个流行的基于Promise的HTTP客户端，用于浏览器和Node.js。它可以使发送HTTP请求变得更加简单和高效。
一般前端使用axios进行http请求发送

import axios from 'axios'
// 利用axios对象的方法create,创建一个axios实例
const request = axios.create({
    baseURL: "http://localhost:8080",
    timeout: 3000000, //请求超时的时间
    withCredentials: true, // 打开withCredentials选项
    crossDomain: true,
})

// request 请求拦截器，在发请求之前，请求拦截器可以检测到
//config:配置对象，里面有一个属性是headers请求头
request.interceptors.request.use(config => {
	  // 设置允许跨域的域名和请求方法
	  config.headers['Access-Control-Allow-Origin'] = '*';
	  config.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE';
    return config
}, error => {
    return Promise.reject(error)
});

// response 响应拦截器
request.interceptors.response.use(
    //响应成功回调函数
    response => {
        let res = response.data;
        return res;
    },
    //响应失败的回调函数
    error => {
        Toast.clear()
        console.log('err' + error)
        return Promise.reject(error)
    }
)

// 对外暴露
export default request

CORS跨域

CORS（Cross-Origin Resource Sharing）是一种跨域访问资源的标准，可以通过在服务器端设置响应头来实现跨域请求。以下是CORS的示例代码：

// 在后端Spring MVC控制器中配置CORS
@CrossOrigin
@RestController
@RequestMapping("/api")
public class MyController {
    // 控制器的方法
}

三、后端跨域解决方案

反向代理服务器

使用反向代理服务器可以将前端请求转发到后端服务器，从而绕过跨域限制。以下是反向代理服务器的示例代码：
这里nginx是要和你的前端服务在一台服务器上的，然后你访问的时候通过前端的nginx进行转发的后端服务器才行

# NGINX反向代理配置示例
location /api {
    proxy_pass http://backend-server;
}

四、Spring Cloud中的跨域解决方案

Gateway网关的跨域配置

整个项目中只需要配置网关的配置文件即可，其他地方（前后端）都不需要在进行更改
在Spring Cloud中使用Gateway作为网关时，可以通过配置来处理跨域请求。以下是Gateway网关的跨域配置的示例代码：

# 在Gateway网关中配置跨域
spring:
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            allowedOrigins: "*"
            allowedHeaders: "*"
            allowedMethods: "*"

在这里插入图片描述

五、基于Vue和Spring Cloud的跨域整合实践

`这两种配置只需配置一种即可生效（前端or后端）`

前端Vue项目配置

在Vue项目中进行跨域配置，确保前端请求能够访问后端服务。以下是前端Vue项目配置的示例代码：
参考：Vue官方文档

// 在Vue项目的配置文件中设置代理
module.exports = {
  devServer:{
    proxy:{
      '/getTest':{
        target:"http://localhost:7734",  //跨域的域名（不需要写路径）
        changeOrigin:true,//是否开启跨域
        // pathRewrite:{  //路径重写
        //
        // }
      }
    }
  }
}

后端Spring Cloud项目配置

这是一种方案，还可以使用上面说的gateway配置文件的方式，这两种二选一
在Spring Cloud项目中进行跨域配置，确保后端能够处理前端请求。以下是后端Spring Cloud项目配置的示例代码：

import com.alibaba.nacos.shaded.com.google.common.net.HttpHeaders;
import org.springframework.cloud.gateway.filter.GatewayFilterChain;
import org.springframework.cloud.gateway.filter.GlobalFilter;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;
import org.springframework.web.server.ServerWebExchange;
import reactor.core.publisher.Mono;

import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
// 在后端Spring Cloud-GateWay中配置跨域
@Component
@Order(2)
public class CorsResponseHeaderFilter implements GlobalFilter {


    private static final String ANY = "*";


    @Override
    @SuppressWarnings("serial")
    public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {
        return chain.filter(exchange).then(Mono.fromRunnable(() -> {
            exchange.getResponse().getHeaders().entrySet().stream()
                    .filter(kv -> (kv.getValue() != null && kv.getValue().size() > 1))
                    .filter(kv -> (kv.getKey().equals(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN)
                            || kv.getKey().equals(HttpHeaders.ACCESS_CONTROL_ALLOW_CREDENTIALS)
                            || kv.getKey().equals(HttpHeaders.VARY)))
                    .forEach(kv ->
                    {
                        // Vary只需要去重即可
                        if(kv.getKey().equals(HttpHeaders.VARY)) {
                            kv.setValue(kv.getValue().stream().distinct().collect(Collectors.toList()));
                        } else{
                            List<String> value = new ArrayList<>();
                            if(kv.getValue().contains(ANY)){  //如果包含*，则取*
                                value.add(ANY);
                                kv.setValue(value);
                            }else{
                                value.add(kv.getValue().get(0)); // 否则默认取第一个
                                kv.setValue(value);
                            }
                        }
                    });
        }));
    }
}