vue项目登录界面error=TypeError: Failed to fetch

### Vue 登录页面 `TypeError: Failed to fetch` 错误解决方案

当遇到 `TypeError: Failed to fetch` 的错误时，这通常意味着客户端尝试通过 Fetch API 发起请求失败。对于 Vue 项目中的登录界面来说，可能的原因包括但不限于网络配置不当、服务器未正确响应或跨域资源共享 (CORS) 设置不正确。

#### 1. 检查 URL 和端口设置
确保用于发起 HTTP 请求的目标地址是正确的，并且服务正在监听该位置。如果是在本地开发环境中工作，则应确认前后端应用都已启动并处于预期状态[^2]。

#### 2. 验证后端接口可用性
可以通过 Postman 或者直接在浏览器中访问相应的API来验证后端接口是否能够被成功调用。这样做可以帮助排除任何潜在的服务端问题。

#### 3. 处理 CORS 问题
如果前端与后端部署在同一域名下但不同子路径上，或者完全不同的域名之间通信，那么可能会碰到跨源资源分享(Cross-Origin Resource Sharing, CORS)的问题。此时可以在 Express.js 中间件里加入如下代码片段以允许特定来源的请求：

const express = require('express');
const cors = require('cors');

let app = express();

app.use(cors({
    origin: 'http://localhost:8080', // 替换成实际的前端地址
}));

这段代码会告诉 Web 浏览器哪些外部站点可以加载当前网站上的资源。

#### 4. 修改 Vite 配置文件
针对使用 Vite 构建工具的情况，在 vite.config.ts 文件内添加 proxy 字段映射远程主机名到 localhost 上对应的端口号，从而绕过 CORS 限制:

import { defineConfig } from 'vite'
export default defineConfig(({ command }) => ({
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    }
  }
}))

此方法适用于开发环境下的调试目的；生产环境下建议调整后端的安全策略而不是依赖代理转发请求[^3]。

#### 5. 调试 Fetch 请求参数
最后不要忘记仔细检查发送给服务器的数据格式以及 headers 是否符合要求。特别是 Content-Type header 应该匹配所传递的内容类型（例如 application/json 对于 JSON 数据）。另外还要注意 POST 方法体内的数据编码方式，比如 FormData() 类型适合表单提交场景而 plain text 则更适合其他情况[^1]。