nginx反向代理

前端配置

1、.env文件配置

# VUE_APP_BASE_API = '开发时对应的后端服务'

2、vue.config.js文件配置

devServer: {
    port: port,
    open: true,
    proxy: {
      '^/operation': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true
      },

3、nginx 文件配置

server {
            listen       8080;# 访问端口
            server_name  localhost;
            add_header Content-Security-Policy "upgrade-insecure-requests;connect-src *";
            #charset koi8-r;
            #access_log  /var/log/nginx/host.access.log  main;
            #resolver 172.20.0.10 valid=10s;
            #location /dss/visualis {
            #root   /links/web/dss/visualis; # visualis静态文件目录
            #autoindex on;
            #}
            location / {
            if ($request_filename ~* .*\.(?:htm|html)$)  ## 配置页面不缓存html和htm结尾的文件
            {
               add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
            }
            root   /usr/share/nginx/html; # 前端包解压的目录
            index  index.html index.html;
            try_files $uri $uri/ /index.html;
            }
            location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
                access_log        off;
                expires           365d;
                gzip_static       on;
                add_header        Cache-Control public;
                root   /usr/share/nginx/html;
                
            }
            # 关键代码
           ` location /operation/ {
           # url= 线上对应的后端域名，例如https://域名:端口号
            proxy_pass https://operate-front:8080;`
            proxy_set_header Host $proxy_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header remote_addr $remote_addr;
            proxy_http_version 1.1;
            proxy_connect_timeout 4s;
            proxy_read_timeout 600s;
            proxy_send_timeout 12s;
            }
            #error_page  404              /404.html;
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
            root   /usr/share/nginx/html;
            }
        }