nuxt项目如何实现部分接口在浏览器端调用

首先大家要清楚的是nuxt是服务端渲染，所以接口的请求跟页面的渲染都是在服务端渲染完成后再返回给浏览器的用户端。

在所有的资源都在服务端渲染后，服务端的压力就会变得更大一些。

那我们就会想到能不能只把关键的内容和接口在服务端渲染，其他不重要的内容还是通过axios在浏览器端渲染呢，其实是可以的，nuxt本身是支持在浏览器渲染的。

通过process.client判断如果是在浏览器端就发起axios请求，后面的操作就跟vue的操作一样了。

浏览器渲染需要用到反向代理，需要配置nginx的反向代理。通常后端应用会占用一个端口，比如localhost:8091。

nuxt项目起来后通常占用3000端口(localhost:3000)，那么此时如果在nuxt项目里面直接调用当前域名的8091端口的接口是会报跨域问题的。因为默认情况下浏览器是不允许跨域的。

也就是请求根本不会到8091端口，浏览器就会中断请求的，注意这个是浏览器阻止这个动作。这个时候就要用到nginx的反向代理配置了。

也就是接口还是请求当前域名跟端口，在通过nginx配置，将接口全部转发到后端应用端口就可以实现。

比如：

nuxt项目运行在localhost：3000，后端应用运行在localhost:8091。

接口全部以bootService为前缀，那么将带bootService的请求转发到8091。

nginx具体配置如下：

接口转发到后端应用端口：

location /bootService
{
proxy_pass http://localhost:8091;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
}

默认所有请求转到nuxt应用端口：

location /
{
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
}

比如本网站www.dsiab.com就是采用这种方式，首先列表是通过服务器渲染，但是右边的推荐跟分类数据是通过浏览器渲染，即在页面加载完成后在通过ajax请求在渲染。改造完成后打开速度明显后提升。

本文章由javascript技术分享原创和收集