Vue + Vite + Axios 项目多环境以及部署前后端跨域

最近在前端多环境和部署服务器之后出现的跨域的问题。

多环境

前端多环境 Vite Axios

1.首先在项目目录下定义多环境的文件。

这里列举开发环境和发布环境

.env.development 环境

# 开发时加载// 此处为开发时接口
VITE_API_URL = 'http://localhost:8080/api'

.env production 环境

# 发布时加载// 生产时接口
VITE_API_URL = 'http://xxxxxxxxxxx/api'  线上后端地址

2. 在配置的 Axios 识别环境

const myAxios = axios.create({//识别环境baseURL: import.meta.env.VITE_API_URL as any,timeout: 5000,headers: { 'Content-Type': 'application/json;charset=UTF-8' },// @ts-ignore//跨域changeOrigin: true
});

3. 项目因为使用的是 Vite 打包构建，所以在package文件下的 vite 的 build 命令加上 production

"scripts": {"dev": "vite","build": "vite build --mode production","preview": "vite preview"},

后端多环境 Spring Boot

创建 application-prod.yml 文件，配置信息为线上环境的地址，比如数据库，redis等

#项目名称，此处是spring boot 2.5版本之后的写法，之前的写法不能识别
spring:config:activate:on-profile:prodapplication:name: guanlixitong#数据库配置datasource:driver-class-name: com.mysql.cj.jdbc.Driverusername: dazipassword: 123456url: jdbc:mysql://localhost:3306/dazi#sesson 失效时间 86400秒session:timeout: 86400  store-type: redis

部署命令

java -jar ./{项目打包之后的 jar 包名称，比如maven打包之后target里的 jar 包} --spring.profiles.active=prod

项目启动日志

INFO 14040 --- [           main] c.p.d.UserCenterBackendApplication       : The following 1 profile is active: "prod"
INFO 14040 --- [           main] o.a.catalina.core.AprLifecycleListener   : APR capabilities: IPv6 [true], sendfile [true], accept filters [false], random [true], UDS [true].   
INFO 14040 --- [           main] o.a.catalina.core.AprLifecycleListener   : APR/OpenSSL configuration: useAprConnector [false], useOpenSSL [true]
INFO 14040 --- [           main] o.a.catalina.core.AprLifecycleListener   : OpenSSL successfully initialized [OpenSSL 1.1.1v  1 Aug 2023]
INFO 14040 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]

可以看到识别到了 prod 环境，后端测试也可以发现能够连接上线上数据库了。

（后来线上测试发现 redis 能连上，也能存储数据，但是不能识别登录状态，头疼）

跨域

参考文档：SpringBoot设置Cors跨域的四种方式 - 简书 (jianshu.com)

官方文档：Spring 和 CORS 跨域 - spring 中文网 (springdoc.cn)

1. Nginx 配置

#跨域配置
location ^~ /api/ {proxy_pass http://127.0.0.1:8080;   #反向代理配置add_header 'Access-Control-Allow-Origin' $http_origin; #预检查请求也需要这行add_header 'Access-Control-Allow-Credentials' 'true';add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers '*';if ($request_method = 'OPTIONS'){add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Origin' $http_origin;add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;}
}

2. 后端 @CrossOrigin 注解

在 controller 文件加上注解

@CrossOringin(origins = {允许跨域的地址}, methods = {可以跨域的请求方式}, allowCredentials = "true")

3. 添加 web 全局请求拦截器

//新建config目录，新建在该目录下
@Configuration
public class WebMvcConfg implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {//设置允许跨域的路径registry.addMapping("/**")//设置允许跨域请求的域名//当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】.allowedOrigins("http://localhost:9527", "http://127.0.0.1:9527", "http://127.0.0.1:8082", "http://127.0.0.1:8083")//是否允许证书 不再默认开启.allowCredentials(true).allowedHeaders(CorsConfiguration.ALL)//设置允许的方法.allowedMethods(CorsConfiguration.ALL)//跨域允许时间.maxAge(3600);}
}二选一即可
---------------------------------------------------------------
//Spring 中文网
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 WebMvcConfiguration implements WebMvcConfigurer{@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")                  // 允许跨域请求的path，支持路径通配符，如：/api/**.allowedOrigins("*")                    // 允许发起请求的源.allowedHeaders("*")                    // 允许客户端的提交的 Header，通配符 * 可能有浏览器兼容问题.allowedMethods("GET")                  // 允许客户端使用的请求方法.allowCredentials(false)                // 不允许携带凭证.exposedHeaders("X-Auth-Token, X-Foo")  // 允许额外访问的 Response Header.maxAge(3600)                           // 预检缓存一个小时;}
}

4. CorsFilter

import java.time.Duration;import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.http.HttpHeaders;
import org.springframework.util.StringUtils;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer{// 通过 FilterRegistrationBean 注册 CorsFilter@Beanpublic FilterRegistrationBean<CorsFilter> corsFilter() {// 跨域 FilterCorsFilter corsFilter = new CorsFilter(request -> {// 请求源String origin = request.getHeader(HttpHeaders.ORIGIN);if (!StringUtils.hasText(origin)) {return null; // 非跨域请求}// 针对每个请求，编程式设置跨域CorsConfiguration config = new CorsConfiguration();// 允许发起跨域请求的源，直接取 Origin header 值，不论源是哪儿，服务器都接受config.addAllowedOrigin(origin);// 允许客户端的请求的所有 HeaderString headers = request.getHeader(HttpHeaders.ACCESS_CONTROL_REQUEST_HEADERS);if (StringUtils.hasText(headers)) {config.setAllowedHeaders(Stream.of(headers.split(",")).map(String::trim).distinct().toList());}// 允许客户端的所有请求方法config.addAllowedMethod(request.getHeader(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD));// 允许读取所有 Header// 注意，"*" 通配符，可能在其他低版本浏览中不兼容。config.addExposedHeader("*");// 缓存30分钟config.setMaxAge(Duration.ofMinutes(30));// 允许携带凭证config.setAllowCredentials(true);return config;});FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(corsFilter);bean.addUrlPatterns("/*");                  // Filter 拦截路径bean.setOrder(Ordered.LOWEST_PRECEDENCE);   // 保证最先执行return bean;}
}

可能出现的问题

//报错信息
The 'Access-Control-Allow-Origin' header contains multiple values'*, *', but only one is allowed.

域名冲突，可能是上述配置跨域重复，比如 Nginx 配置和后端配置，只需要删除某一个即可，比如 Nginx 配置中的关于请求头，请求方法等，具体看实际测试情况。

上述配置最后选择了 Nginx 配置，注解在开发时有效，但是一部署线上之后就不生效，原因不知。其他的或多或少会报错，比如 Get 请求不跨域，Post 请求就跨域。。。

知识尚浅，有错误烦请指出。