在前端.js文件中导入axios库时出现问题

Question

我正在开发一个nodejs和express项目，使用mongodb作为数据库，并试图在该项目中使用axios。我的设置是使用.pug来渲染前端，但现在我似乎在前端javascript代码中导入axios库时遇到了问题。

浏览器控制台中有一个错误：未捕获类型错误：未能解析模块说明符"；axios"；。相对引用必须以"或"开头/&"&"/&"；，或"/&"；。

我的文件结构是(仅包括相关文件(：

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.js

我已经用npm安装了axios，它在package.json.中是一个依赖项

在index.js文件中，我使用了两者：

import axios from 'axios';

和：

const axios = require('axios');

我还尝试在base.pug文件中使用引用，包括页眉和页脚，但这也不起作用。在那里，我尝试使用这些参考：

script(src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.23.0/axios.min.js')

和：

script(src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js')

我没有为前端绑定.js代码。

有什么想法吗？

Answer 1

我能够找到自己问题的解决方案：(

由于我无法在index.js文件中导入axios，我使用了base.pug文件中的script标记。

问题是，我使用的是npm库头盔，在版本4和更高版本中，头盔集作为默认的非常严格的内容安全策略。为了解决这个问题，我不得不在app.js文件中设置头盔，如下所示：

app.use(
helmet({
contentSecurityPolicy: false,
})
);

通过此设置，我可以设置自己的内容安全策略。当我做出这些改变时，我得到了一个关于CORS的新错误："访问位于"的XMLHttpRequesthttp://127.0.0.1:3000/***'来自原点'http://localhost:3000'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在"access control Allow Origin"标头">

为了修复这个CORS错误，我安装了另一个名为"CORS"的npm包：

npm install --save cors

然后在app.js文件中这样使用它：

const cors = require('cors');

最后：

app.use(cors({ origin: '*' }));

紧身胸衣部分的最终设置可能是一般设置，但到目前为止它对我有效。不过，我会仔细阅读文档，看看是否有更好的设置可以使用。