Vue+Vite+Axios项目多环境以及部署前后端跨域
作者：确定吗阿斌
本文介绍了如何在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:
prod
application:
name: guanlixitong
#数据库配置
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
username: dazi
password: 123456
url: 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 能连上，也能存储数据，但是不能识别登录状态，头疼）
跨域
官方文档：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 {
@Override
public 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{
@Override
public 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
@Bean
public FilterRegistrationBean<CorsFilter> corsFilter() {
// 跨域 Filter
CorsFilter 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);
// 允许客户端的请求的所有 Header
String 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 请求就跨域。。。
到此这篇关于Vue+Vite+Axios项目多环境以及部署前后端跨域的文章就介绍到这了,更多相关Vue Vite Axios 多环境及跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！