前言：遇到问题，解决问题。

第一部分：VUE 配置

1、vite.config.js 文件

server: {proxy: {'/api': {target: env.VITE_BASE_URL,changeOrigin: true,secure: false,rewrite: path => path.replace(/^\/api/, '')}}},

2、.env 文件

VITE_BASE_URL = 'https://api.xxx.cn'

3、axios 文件

const instance = axios.create({baseURL: '/api',timeout: 10000,
});

4、某接口文件

 const login = async (params) => {return requestInstancePostFormData('/user/login', params);};

二、Spring Boot 配置

1、某接口文件

@CrossOrigin
@RestController
@RequestMapping("/user")
@Api(tags = "User API")
public class UserController {......
}

2、文件配置

 String[] apiExcludes = new String[]{"/user/login",};registration.excludePathPatterns(apiExcludes);

三、Nginx 配置

root /www/wwwroot/www.xxx.cn/dist;#Nginx 配置可以确保 Vue Router 正常工作location / {try_files $uri $uri/ @router;index index.html;}location @router {rewrite ^.*$ /index.html last;}#反向代理配置，确保后面有/location /api {proxy_pass https://api.xxx.cn/;}

至此，基本完成，不过有个特别地方，请注意：登录时会报401，如下图：

解决如下图：

两者区别分析（以下分析来自chatGPT）：

在 Nginx 的配置中，proxy_pass 指令用于指定反向代理的目标服务器：

1. proxy_pass https://api.xxx.cn;

   • 这种写法没有在结尾处加斜杠 (/)。
   • Nginx 将会把匹配到的请求路径直接拼接在 https://api.xxx.cn 后面。例如，如果请求的路径是 /api/user/login，Nginx 将会将它转发到 https://api.xxx.cn/api/user/login。

2. proxy_pass https://api.xxx.cn/;

   • 这种写法在结尾处加了斜杠 (/)。
   • Nginx 将会忽略掉请求路径中匹配的 location 配置部分，仅将域名后面的路径直接替换成请求路径。例如，如果请求的路径是 /api/user/login，Nginx 将会将它转发到 https://api.xxx.cn/user/login，即忽略了 location 中定义的 /api 部分。

总结区别：

• 无斜杠 (proxy_pass https://api.xxx.cn;)：保留匹配到的 location 中的路径部分，并将其附加在代理目标的URL后面。
• 有斜杠 (proxy_pass https://api.xxx.cn/;)：忽略匹配到的 location 中的路径部分，直接将请求路径附加在代理目标的URL后面。

至此，结文。

鸣谢：chatGPT 陪伴产品开发的每一天。