首页 技术设计 前端 vue

1. 前端打开代理

proxy: {
        /** 代理前缀为 /dev-api 的请求  */
        [env.VITE_APP_BASE_API]: {
          changeOrigin: true,
          // 接口地址
          target: env.VITE_APP_API_URL,
          rewrite: path =>
            path.replace(new RegExp('^' + env.VITE_APP_BASE_API), ''),
        },
      },

2.nginx 打开代理

注意：配置代理，代理名称和 IP 地址的末尾都得加上 “/”

#user  nobody;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8080;
        server_name  10.8.9.94;
        location ^~/dev-api/ { # 末尾加 /
            proxy_pass   http://192.1.2.3:9000/; # 末尾加 /
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Max-Age 3600;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Headers $http_access_control_request_headers;
            if ($request_method = OPTIONS ) {
                return 200;
            }
        }
        location / {
            root   xiangmu/dist;
            index  index.html index.htm;
            add_header 'Access-Control-Allow-Origin' '*';
            try_files $uri $uri/ /index.html;
        }
        #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   html;
        }
    }
}