En nuestra aplicación VueJS, tengo una URL que se devuelve desde una API que apunta a amer.example.com/put/stuff que necesito PONER algunos datos.
Obviamente, cuando hago este PUT, obtengo errores de CORS. Para remediar esto, tengo una configuración de proxy devServer que dice redirigir todo /put/stuff para pasar por example.com de esta manera:
devServer: { port: 9034, proxy: { '/put/stuff': { target: 'amer.example.com', }, }, },Voila, las cosas comienzan a funcionar de nuevo.
Sin embargo, la URL que se devuelve desde la API es dinámica y puede apuntar a otra región como EMEA, emea.example.com/put/stuff , pero todo lo demás en la URL es exactamente igual.
¿Cómo puedo hacer que el proxy sea dinámico para que vaya a amer.example.com , emea.example.com o cualquier otra región según la URL que obtengo de otra API?
No tengo control sobre la otra API y cómo se forma la URL que se devuelve.
La única forma que se me ocurre de hacer esto sería fea, pero debería funcionar.
Inserte la región en la ruta de la URL que obtiene de la API y luego busque esa ruta en el proxy. Finalmente, use pathRewrite en su proxy para eliminarlo de la URL.
Cree una nueva función en sus methods que inserte la región en la ruta de la URL, así:
methods: { insertRegionIntoUrlPath(urlStr) { const url = new URL(urlStr); // Grab the region from the url, if it includes 'https://' then update the substring obviously). const regionPath = `/${url.hostname.substring(0,4)}`; // Set the path to now include the region in the beginning url.pathname = `${regionPath}${url.pathname}`; // Return the full URL that now contains the region: `https://amer.example.com/amer/put/stuff` return url.href; }, }Luego usaría esta función dondequiera que ocurra PUT para agregar la región a la ruta de la URL.
Supuse que su región siempre tiene 4 caracteres, si eso pudiera ser diferente, simplemente use algunas expresiones regulares para extraer el subdominio.
Luego, en la configuración de su proxy, ahora puede apuntar a las rutas de la región específica que desea y eliminar la parte de la ruta que agregó, así:
module.exports = { devServer: { proxy: { '/amer': { target: 'https://amer.example.com', pathRewrite: {'^/amer' : ''} // Removing `/amer` from the path }, '/emea': { target: 'https://emea.example.com/', pathRewrite: {'^/emea' : ''} // Removing `/emea` from the path } } } }; Entonces, ahora lo que ha hecho es obtener una URL de la API, agregó la región a la ruta e hizo una solicitud PUT y finalmente el proxy recoge estas solicitudes porque coincidirán con las rutas de la región como /amer y luego simplemente tenemos el proxy elimine esa parte de la URL antes de que se envíe la solicitud.