前端跨域解决方案

打包前端项目体验

• 生产环境和开发环境配置
• 上线使用nginx进行代理跨域
• 上线使用后端进行跨域

评估结果 Result

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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

前端上线和开发环境配置

// 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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25