打包前端项目体验
- 生产环境和开发环境配置
- 上线使用nginx进行代理跨域
- 上线使用后端进行跨域
评估结果 Result
方法 | 软件 | 优点 | 缺点 |
---|---|---|---|
前端跨域 | webpack | 直接在前端进行跨域,实质是利用webpack作为代理转发给服务器 | 上线之后不可以用,而且有时候还是需要后端也要设置跨域。 |
后端跨域 | SpringBoot、Neo4j | 直接进行配置跨域即可,接收来自所有域的请求时,前端不能是withCredential。 | 需要自己写后端或联系后端 |
nginx跨域 | nginx | 实质效果和webpack跨域差不多,因为跳过了浏览器,所以不会被CORS | 需要看看后端是否进行了跨域,不然浏览器还是会出现CORS不符合标准的错误 |
nginx跨域配置
下面是一些跨域配置,前端部署在9998,但是我需要访问部署在10000端口的服务和7474端口的图形数据库,因此按照如下配置。相当于只为来自9998端口的请求代理,然后访问neo4j的时候你需要隐藏添加的origin,因为neo4j已经设置了可以跨域,相当于我们在nginx端进行了集成管理外部接口。
server {
listen 9998;
server_name localhost;
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' '*';
add_header 'Access-Control-Allow-Methods' '*';
root G:\\Webapps\\beidou;
}
location = /50x.html {
root html;
}
}
# 负责请求转发,跨域
server {
listen 9997;
server_name localhost:9998;
add_header 'Access-Control-Allow-Origin' 'http://localhost:9998';
add_header 'Access-Control-Allow-Credentials' 'true';
location /encrypt {
proxy_pass http://localhost:10000/encrypt;
}
location /neo4j {
proxy_hide_header 'Access-Control-Allow-Origin';
proxy_pass http://localhost:7474/db/neo4j/tx/commit;
}
}
前端上线和开发环境配置
// vite.config.ts开发环境
// 自己的加密方法,部署需要一起部署
"/encrypt": {
target: "http://localhost:10000",
changeOrigin: true
}
// .env.production生产环境
// 取消前端的代理
VITE_Encrypt_Server = "http://localhost:9997/encrypt"
VITE_NEO4J_Server = "http://localhost:9997/neo4j"
// 处理方法
private RSAEncrypt(jsonData) {
const axiosConfig = {
method: "post",
url:
import.meta.env.MODE == "development"
? "/encrypt"
: import.meta.env.VITE_Encrypt_Server,
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: jsonData
}
return axios(axiosConfig)
}