前端跨域解决方案

打包前端项目体验

• 生产环境和开发环境配置
• 上线使用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)
}