谈谈nuxt中的请求代理

发表于:2023-08-08 14:10

技术,nuxt

热度:142

喜欢: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的接口。饶了一大圈发现相对路径和绝对路径代理的问题，特此记录。

不要 为赋新词强说愁