前端接口返回值错误，请求帮助

Question

我在网络上跟着别人做了一个前端vue登录界面的项目，在创作完后打开浏览器的那个开发者模式，并不能像我观看的视频里显示出登陆成功的样式，只能显示出如下

自查了一下是我没有设置什么Authorization 变量，我这个程序是没有后端的只有些vue框架和 html css javesc组成的内容请问返回这个正常吗这是我的config文件

求大家(lao)指点哪里错了

Answer 1

上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

根据您提供的信息，问题出在您的config.js文件中，具体表现为“TypeError: Cannot read properties of undefined (reading 'Authorization')”，这意味着您的代码中尝试读取一个未定义的属性。

在您的config.js文件中的第24行，您尝试读取config.headers.common['Authorization']的值，但是在之前的代码中并没有对config进行定义或赋值。因此，在这一行代码执行时会报错。

为了解决这个问题，您可以按照以下步骤进行操作：

1. 在config.js文件中添加一行代码，用于定义config变量。可以将这行代码放在文件的开头，如下所示：

   const config = {};
   

2. 修改if语句中的逻辑，确保在token为null或非字符串类型时不会执行设置Authorization头部的代码。可以使用typeof运算符来检查token的类型。修改后的代码如下：

   if (token == null || typeof token !== 'string') {
     // 如果token为null或非字符串类型，不设置Authorization头部
     // 或者可以设置一个默认的Authorization值，例如空字符串或一个固定的未授权标识
   } else {
     // 如果token是字符串，设置Authorization头部
     config.headers.common['Authorization'] = `Bearer ${token}`;
   }
   

3. 重新运行代码，看是否仍然有错误。

通过以上修改，您应该能够解决这个问题。但请注意，在没有后端的情况下，您无法得到一个真实的Authorization值，因此可能需要模拟一个固定的值来测试登录成功的样式展示。

希望这些信息对您有帮助。如有任何进一步的问题，请随时提问。