Esta es una continuación de mi pregunta anterior .
Estoy usando Vite, y el servidor de desarrollo viene con un servidor proxy, de modo que puedo especificar un proxy como este:
proxy: { '/v1': { target: 'https://127.0.0.1:8080', changeOrigin: true } }Y luego una llamada de búsqueda llamada así:
fetch("/v1/get-users");Efectivamente se transformará en esto:
fetch("https://127.0.0.1:8080/v1/get-users");Esto funciona perfectamente, porque ahí es donde mi servidor API está alojado en mi entorno de desarrollo.
Sin embargo, esto fallará en producción , porque mi servidor API está alojado en https://api.mysite.com
Idealmente, podría expresar de alguna manera que mi prefijo de prod debería ser https://api.mysite.com en lugar de https://127.0.0.1:8080 , pero aparentemente Vite no usa un servidor proxy con su salida de compilación.
¿Cómo maneja esto la gente normalmente? Lo único que se me ocurre es tal vez algo como esto, pero parece un poco asqueroso:
function getPrefix() { return location.hostname === "mysite.com" ? "https://api.mysite.com" : ""; } fetch(getPrefix() + "/v1/get-users");Pero parece un poco complicado y engorroso tener que agregar eso a cada llamada de búsqueda.
También podría hacer un envoltorio de búsqueda, pero me pregunto si este tipo de cosas es la forma en que las personas resuelven esto para empezar, o si hay una solución más de "mejores prácticas" para este problema común.
La solución más simple (y más limpia) que se me ocurre es reemplazar los valores en su código. Esto se hace a menudo para cosas como process.env.NODE_ENV o similares, pero este es ciertamente un caso de uso estándar.
Puede usar rollup-replace-pluginvite-plugin-replace , que le permite reemplazar valores en su código.
Cambie vite.config.js a:
// ... import { replaceCodePlugin } from "vite-plugin-replace"; export default { // ... plugins: [ replaceCodePlugin({ replacements: [ { from: "__SITE_BASE__", to: process.env.NODE_ENV === "production" ? "https://api.mysite.com" // production site : "" // development proxy, } ], }), ], });En tu código, harías:
fetch("__SITE_BASE__/v1/get-users");Esto sería ventajoso sobre su enfoque actual, ya que en primer lugar, puede cambiar fácilmente la base de su sitio (en lugar de buscar en su código para encontrar esa función), en segundo lugar, es más fácil de escribir y, por último, tiene datos estáticos, por lo que no No tengo que llamar a la función cada vez que el usuario carga la página, lo que es mejor para el rendimiento de todos modos.