Nuxt项目解决客户端反向代理后导致服务端请求路径错误问题

在Nuxt项目反向代理，解决跨域问题带着大家做了个Nuxt项目的方向代理 解决了客户端发请求跨域的问题

但它又会带出一个新的问题
我们把代理的界面 放在项目的首页
就会出现地址错误

因为这两是在服务端 他没有接受你的前端代理

比如说 你刷新 或者直接通过链接访问页面 那就是服务端渲染 如果你是通过跳转 那么就是客户端渲染
客户端渲染需要代理 但服务端渲染不需要代理

那么 我们就需要判断 当前发请求的地方是 客户端还是服务端 然后来决定 处不处理代理请求地址

Nuxt项目其实有个全局变量 叫 process.server 类型 布尔 值 true/false
true 当前是服务端
false 当前是客户端

那么 我们完全可以这样写

asyncData(){
    
    
  return axios({
    
    
      url: process.server?"http://localhost:8081/user/":"/user/",
      headers:{
    
    
      }
    }).then(res=>{
    
    
      console.log(res.data);
      return {
    
    
          users: res.data
      }
    })
},

这个意思就是 如果当前是服务端 那就不用考虑跨域 也不需要方向代理 我们就直接写接口的全地址了
如果process.server为false 那么 当前还在客户端 我们就用这个user去匹配方向代理
再次访问我们项目首页

这里 服务端渲染页面出来了 服务端也请求成功在控制台输出了请求的数据