Estoy trabajando en un proyecto nodejs y express, usando mongodb como base de datos, y estoy tratando de usar axios en ese proyecto. Mi configuración es usar .pug para la representación de la interfaz, pero ahora parece que tengo un problema al importar la biblioteca axios en el código javascript de la interfaz.
En la consola del navegador hay un error: TypeError no capturado: no se pudo resolver el especificador de módulo "axios". Las referencias relativas deben comenzar con "/", "./" o "../".
Mi estructura de archivos es (solo incluye archivos relevantes):
public |-- js |-- index.js // here I want to use axios but it does not work views |-- base.pug // I have many other .pug files here package-lock.json package.json app.js server.jsInstalé axios con npm y aparece como una dependencia en package.json.
En el archivo index.js he usado ambos:
import axios from 'axios';
y:
const axios = require('axios');
También he intentado usar una referencia en el archivo base.pug, tanto en el encabezado como en el pie de página, pero tampoco funciona. Allí traté de usar estas referencias:
script(src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.23.0/axios.min.js')
y:
script(src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js')
No he estado empaquetando el código .js para la interfaz.
¿Alguna idea sobre como arreglar esto?
Pude encontrar la solución para mi propio problema :)
Como no podía importar axios en el archivo index.js, utilicé la etiqueta de script en el archivo base.pug.
El problema fue que estoy usando el casco de la biblioteca npm y en la versión 4 y posteriores, los conjuntos de casco son una política de seguridad de contenido muy estricta por defecto. Para solucionarlo, tuve que configurar el casco en el archivo app.js de esta manera:
app.use( helmet({ contentSecurityPolicy: false, }) );Con esta configuración, puedo configurar mi propia política de seguridad de contenido. Sin embargo, cuando realicé estos cambios, recibí un nuevo error con respecto a CORS: "El acceso a XMLHttpRequest en 'http://127.0.0.1:3000/***' desde el origen 'http://localhost:3000' ha sido bloqueado por Política de CORS: la respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: no hay un encabezado 'Access-Control-Allow-Origin' en el recurso solicitado".
Para corregir este error de CORS, instalé otro paquete npm llamado 'cors':
npm install --save corsLuego, en el archivo app.js lo usé así:
const cors = require('cors');y finalmente:
app.use(cors({ origin: '*' }));La configuración final para la parte cors podría ser una configuración general, pero funciona para mí a partir de ahora. Sin embargo, leeré la documentación y veré si hay una mejor configuración para usar.