在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去匹配方向代理
再次访问我们项目首页
这里 服务端渲染页面出来了 服务端也请求成功在控制台输出了请求的数据