谈谈nuxt中的请求代理

发表于:2023-08-08 06:10
技术,nuxt
热度:125
喜欢:0

开发环境代理

参考官网配置,在nuxt.config.ts中添加字段如下

复制代码
nitro: {
    devProxy: {
      "/api-remote": {
        target: "https://api.nnnnzs.cn",
        changeOrigin: true,
        prependPath: true
      }
    }
  },

此时,如本地开发环境起的服务端口为4000,则请求http://localhost:4000/api-remote/someApi的请求,会被nuxt的代理转发到 https://api.nnnnzs.cn/someApi

生产环境代理

一般情况下,前端项目起一个单独的nginx server,可以理解为vhost,在部署前端的服务器上生成配置

nginx 复制代码
server {
  listen 80 default_server;
  server_name www.nnnnzs.cn
  location /api-remote/ {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass https://api.nnnnzs.cn;
  }

  location / {
    proxy_pass http://127.0.0.1:4000;
    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;
  }
}

假设在部署服务器上npm run start的端口也是4000,配置location代理,通过外网访问代理到代理服务器的请求http://www.nnnnzs.cn/api-remote/someApi会被代理到https://api.nnnnzs.cn/someApi

请求时机

服务端渲染期间(在server/api目录内发起的http请求同理)本质是nuxt的服务端,发起的http请求,如果在此期间请求外部接口,如果使用相对路径,则无法使用nitro的代理服务

server/api目录

  • 相对路径
js 复制代码
// 不经过nitro代理
export default defineEventHandler(async (event) => {
  return await $fetch('/api-remote/someApi', {
    method: 'GET',
  });
})
  • 绝对路径
js 复制代码
// 经过使用代理
export default defineEventHandler(async (event) => {
  return await $fetch('http://localhost:4000/api-remote/someApi', {
    method: 'GET',
  });
})

components/view 文件夹

useAsyncData 会阻塞页面渲染,拿到数据之后,再进行mounted,所以没不经过代理,但是如果加上协议域名变成绝对路径,就可以走代理

js 复制代码
// 不经过 nitro 代理
const fetchPost = () =>
  $fetch(`/api-remote/someApi`)
const { data } = await useAsyncData("post", fetchPost)

// 经过nitro 代理
const fetchPost = () =>
  $fetch(`http://localhost:4000/api-remote/someApi`)
const { data } = await useAsyncData("post", fetchPost)

// 浏览器发起 经过nginx代理
onMounted(()=>{
  $fetch(`/api-remote/someApi`)
})

我曾经用nestjs写过服务端接口,正常调用。
后来在知道Nuxtjs server/api/ 也可以写接口后,使用page->server/api->http请求到nestjs的接口。饶了一大圈发现相对路径和绝对路径代理的问题,特此记录。

不要 为赋新词强说愁