文章目录
- Nginx 相关命令
- VUE项目devServer.proxy（正向代理）匹配请求中的地址工作流程
- 开发期间代理proxy的配置
- 项目打包上线出现的问题描述
Nginx 相关命令
//运行命令
start nginx 启动nginx服务
//运行命令
nginx -s stop 停止nginx服务
//运行命令
nginx -s reload 重载配置
//运行命令
taskkill /f /t /im nginx.exe
VUE项目devServer.proxy（正向代理）匹配请求中的地址工作流程
在本地开发的过程中，为了本地调试方便，通常会在vue.config.js 中配置 devServer。在devServer中配置proxy属性。实现开发期间的轻松跨域请求
目的：可以将指向本地的请求http://localhost:8080/api/action ，代理到后端的开发服务器上http://localhost:8089/personal-management/action
正向代理：代理服务器代替客户端向服务器发起请求。隐藏客户端。
发起请求：代理服务器从客户端发出请求，向目标服务器发起请求。
响应数据：目标服务器响应请求，代理服务器接收请求，并转发给客户端。
注：魔法就是使用的这个原理。
开发期间代理proxy的配置
devServer: {
host: 'localhost',//服务器地址
port: 8080,
webSocketServer: false,
proxy: {//配置跨域
'/api': {
target: 'http://localhost:8089',
changeOrigin: true,/** 是否允许跨域 */
ws: false,//是否启用websockets，用不到可设为false
pathRewrite: {//对路径匹配到的字符串重写
"^/api": "",
//请求到 http://localhost:8080/api/user
//代理到请求 http://localhost:8089/user
},
}
}
}
当浏览器发起一个请求后， 前端拿配置项中的地址去匹配请求中的地址，如果请求的地址中包含配置中的地址，则匹配成功，匹配成功后，会将匹配到的地址及其后面的地址拼到target的后面，向后端服务器发起跨域请求。
项目打包上线出现的问题描述
最开始将devServer.proxy中的代理地址改成了服务器地址，然后就执行了npm run build打包dist文件，将其部署上线[使用的是Tomcat]。
-
初始问题是：无法访问到我后端的验证码。
-
寻找原因：因为在vue.config.js中配置的 devServer.proxy 只是在开发环境下将请求代理到后端服务器的本地服务，我们把项目打包成dist文件只把我们的组件等资源打包了，
并不会将代理服务器给打包，所以项目中的请求路径不完整导致访问不到对应资源。我访问的依旧是localhost:8080
怎么解决呢？？？？？？？？
- 资源要被访问，那必然还是需要有另一个代理来装载它。我们部署上线最常见的就是使用proxy_pass 代理跨域转发！ 只需要修改配置文件即可，添加proxy_pass即可，xxx.xxx.xxxx.xxx表示你的服务器地址，8889是我后端的访问端口。
location ^~/api/ {
proxy_pass http://xxx.xxx.xxx.xxx:8889/api/;
}
补：2024-4-25
proxy_cookie_path / /api/; # 解决 nginx 反向代理时 session 丢失 无效
proxy_cookie_path是一个Nginx指令，用于在代理请求时调整Cookie的路径。在你提供的配置中，proxy_cookie_path指令的作用是将请求中的Cookie的路径从根路径"/“修改为”/api"/路径，以便在反向代理时保持session有效。这对解决Nginx反向代理时session丢失的问题很有用。
underscores_in_headers是一个Nginx配置指令，控制Nginx是否允许HTTP请求头中包含下划线。默认情况下，该配置项为off，这意味着Nginx会拒绝这样的请求头，并返回400 Bad Request错误。将其设置为on则允许这样的请求头，但这可能会带来安全风险，因为不是所有服务器都能正确处理这些请求头。
underscores_in_headers on; （默认 underscores_in_headers 为off）
后面单独测试了一下这个，亲测可用
axios.defaults.timeout = 5000 // 请求超时↳
axios.defaults.baseURL = 'http://www.wangzhi.com/'
