前言：遇到问题，解决问题。
第一部分：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 指令用于指定反向代理的目标服务器：
-
proxy_pass https://api.xxx.cn;- 这种写法没有在结尾处加斜杠 (
/)。 - Nginx 将会把匹配到的请求路径直接拼接在
https://api.xxx.cn后面。例如，如果请求的路径是/api/user/login，Nginx 将会将它转发到https://api.xxx.cn/api/user/login。
- 这种写法没有在结尾处加斜杠 (
-
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 陪伴产品开发的每一天。
)