vue的build先上部署的 devServer不生效的场景记录

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/'