Estoy tratando de implementar mi sitio web escrito en Vue en un servicio de alojamiento web estático (AWS S3).
He estado usando el modelo de bencodezen que parece generarse usando Vue-CLI . El modelo viene con un servidor de desarrollo preconfigurado de modo que puede redirigir las llamadas de backend (usando axios) a un backend simulado o a un backend de producción:
vue.config.js
module.exports = { [...] // Configure Webpack's dev server. // https://cli.vuejs.org/guide/cli-service.html devServer: { ...(process.env.API_BASE_URL ? // Proxy API endpoints to the production base URL. { proxy: { '/api': { target: process.env.API_BASE_URL } } } : // Proxy API endpoints a local mock API. { before: require('./tests/mock-api') }), }, }Todas las llamadas a myurl.com/api/ * se dirigirán al backend simulado o a API_BASE_URL si está definido. Esto funciona bien mientras se usa el servidor de desarrollo de servicio vue-cli-service , pero no entiendo cómo traducir esto a AWS S3, o cualquier otro servidor web adecuado para la producción. Si trato de iniciar sesión, después de la solicitud, recibo la siguiente respuesta de AWS:
405 Method Not AllowedIndica que la llamada nunca se redirigió (AWS S3 no permite llamadas POST).
¿Es posible redirigir las llamadas API directamente desde el navegador web al backend sin pasar por el servidor web? Si no, ¿cómo configuro mi servidor web de producción de tal manera que las llamadas a myurl.com/api/ * se reenvíen automáticamente?
En el entorno de producción (donde no se aplica la configuración devServer ), debe manejar manualmente las URL, utilizando alguna lógica para averiguar a dónde deben ir las solicitudes. Si el backend no está en el mismo host que el frontend, algo como esto:
const apiPath = process.env.NODE_ENV === 'development' ? '/api' : 'https://mybackendurl.com/api'; axios({ url: `${apiPath}/login`, method: 'post', headers: myHeaders, // etc }) Probablemente no querrá hacer eso antes de cada llamada a la API, por lo que recomiendo crear algún tipo de servicio de API que pueda importar y conectar a axios. Entonces puedes hacer algo simple como url: API.Login()