Vite configura proxy Proxy para resolver domínio cruzado

Quando escrevemos projetos front-end, geralmente encontramos problemas entre domínios. Quando acessamos o caminho URL da API back-end, desde que haja uma diferença no nome do domínio, porta ou protocolo de acesso (como HTTP e HTTPS ), será bloqueado pelo navegador identificado como cross-domain. Além disso, muitas vezes escrevemos repetidamente o nome de domínio do back-end, por exemplo  https://example.com/api/some_end_point, https://example.com/api/other_end_pointpara esses dois casos, podemos usar diretamente a mesma configuração para resolvê-lo, ou seja, a configuração do proxy. ​

Independentemente do Vite ou Webpack, essas ferramentas de empacotamento suportam a configuração de proxies de front-end, que podem converter diretamente o acesso a uma determinada URL em outro endereço de API de back-end real, de modo que o front-end e o back-end sejam considerados usar o mesmo nome de domínio, protocolo e porta, evita o problema de domínio cruzado e evita a gravação tediosa e repetida de nomes de domínio.

Configurar Vite Proxy

Aqui, tomamos a configuração do Vite como exemplo para ver como definir um proxy para solicitações de API. No projeto escrito pelo Vite, existe um  vite.config.jsarquivo de configuração, que contém itens de configuração sobre o Vite, e o agente pode ser configurado nele. Se nosso caminho de projeto de front-end for  http://localhost:3000, precisamos fazer proxy de todas as  /api solicitações de API começando com , e encaminhá-las para  http://localhost:3001, e o caminho de API de back-end não tiver  /apium prefixo, e o prefixo precisa ser removido automaticamente  /api, conforme mostrado no seguinte figura:

// vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3001",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

Em seguida, reinicie o projeto

Resumo

O problema entre domínios front-end é, na verdade, um problema de segurança, que é impedir o acesso mútuo entre serviços de diferentes nomes de domínio, de modo a impedir que programas maliciosos obtenham recursos de back-end ilegalmente. Durante o desenvolvimento, podemos usar um proxy para fazer o proxy da solicitação e alterar o nome do domínio para o mesmo, evitando assim o problema de cruzamento. Definir um proxy no Vite é  vite.config.jsconfigurar  serverpropriedades no arquivo de configuração e configurar  proxyitens de configuração nele. Vários proxies podem ser configurados para solicitar diferentes caminhos de back-end de acordo com diferentes caminhos de API. Neste artigo, apenas um é configurado  /apicomo demonstração.