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

【问题标题】：Problems importing axios library in a frontend .js file在前端 .js 文件中导入 axios 库时出现问题
【发布时间】：2022-01-25 12:43:26
【问题描述】：

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

在浏览器控制台中出现错误：Uncaught TypeError: Failed to resolve module specifier "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 代码。

关于如何解决此问题的任何想法？

【问题讨论】：

标签： javascript node.js axios pug

【解决方案1】：

我能够为自己的问题找到解决方案 :)

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

问题是我正在使用 npm 库头盔，并且在版本 4 及更高版本中，头盔集作为默认的非常严格的内容安全策略。为了解决这个问题，我必须像这样在 app.js 文件中设置头盔：

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

通过此设置，我可以设置自己的内容安全策略。当我进行这些更改时，虽然我收到了关于 CORS 的新错误： “从源 'http://localhost:3000' 访问 XMLHttpRequest 在 'http://127.0.0.1:3000/***' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。”

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

npm install --save cors

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

const cors = require('cors');

最后：

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

cors 部分的最终设置可能是一般设置，但它现在对我有用。我会仔细阅读文档，看看是否有更好的设置可供使用。

【讨论】：