前后端分离的项目,无论是否部署在同一台机器,都应尽量使前后端项目暴露于同一个域下【协议+主机+端口】,方法就是在部署前端的Nginx上,使用同一个域来反向代理后端项目,好处多多:

  1. 彻底、一劳永逸地解决跨域问题(开销也最低,因为不再有OPTIONS请求)。
  2. 共享域名。
  3. 利用反向代理隐藏后端地址。
  4. 集中管理。
server {
    # 0.与浏览器交互的只有这个Nginx虚拟服务器,浏览器看到的【协议+主机+端口】永远只有一个,整个交互过程始终处于同一域下,故不会出现跨域问题
    listen 80;
    server_name localhost;
    
    # 1.前端项目打包好的dist目录,放置到这个目录下
    root /data/;
    
    # 2.后端多个微服务接口通过统一网关(9000)对外暴露,nginx反向代理统一网官 
    location ~* ^/(code|auth|admin|buy) { # 3.【code|auth|admin|buy】是后端各微服务接口前缀,网关按这个前缀来路由请求。
       proxy_pass http://127.0.0.1:9000;
       #proxy_set_header Host $http_host;
       proxy_connect_timeout 15s;
       proxy_send_timeout 15s;
       proxy_read_timeout 15s;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
} 
  1. Docker部署可参考如下Dockerfile:
FROM nginx
COPY dist /data
RUN rm /etc/nginx/conf.d/default.conf
ADD my_nginx.conf /etc/nginx/conf.d/
RUN /bin/bash -c 'echo init ok'

特别注意后端服务的域名规划,比如【code、auth、admin、buy】等域名,要提前在后端接口上统一分配好。