使用Fetch API实现登录功能时出现unexpected end of input错误

先揪出你代码里的两个无效操作 #

• 你把Access-Control-Allow-Origin写在了请求头里——这个响应头是后端返回给浏览器用的，前端发送请求时加它完全无效，浏览器根本不处理。
• 尝试设置mode: "no-cors"更行不通，这种模式下浏览器会返回一个无法读取内容的「透明响应」，你用response.json()根本解析不出任何数据。

正确解决思路：后端配置CORS #

跨域是浏览器的安全限制，必须由后端配合返回指定响应头才能突破，前端单独折腾没用。

第一步：修正前端请求代码

删掉请求头里的无效项，保留必要配置即可：

let headersList = {
  Accept: "*/*",
  "Content-Type": "application/json"
};

let bodyContent = JSON.stringify({
  email: loginData.email,
  passwd: loginData.passwd,
});

let response = await fetch("http://localhost:2000/api/auth/login", {
  method: "POST",
  headers: headersList,
  mode: "cors", // 默认就是cors模式，也可以不写
  body: bodyContent
});
let data = await response.json();
console.log(data);

第二步：后端配置CORS响应头

不管你用什么后端框架，核心是让接口返回以下两个关键响应头：

• Access-Control-Allow-Origin: * （如果想更安全，可以指定你的前端域名，比如http://localhost:3000）
• 因为你发的是带JSON body的POST请求，还要加Access-Control-Allow-Headers: Content-Type

给你几个主流后端的配置示例：

Node.js/Express 用cors中间件

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

// 全局给所有接口启用CORS
app.use(cors());

// 或者只给登录接口配置
app.post('/api/auth/login', cors(), (req, res) => {
  // 你的登录逻辑代码
  res.json({ success: true, msg: '登录成功' });
});

Python/Flask 用flask-cors

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 全局启用CORS

@app.route('/api/auth/login', methods=['POST'])
def login():
    # 处理登录请求的逻辑
    return jsonify({"success": True, "data": "用户信息"})

第三步：验证配置是否生效

重启后端服务后，前端再发请求。打开浏览器控制台的「网络」面板，找到这个请求，查看「响应头」里有没有Access-Control-Allow-Origin——有就说明配置成功了，没有的话回去检查后端代码有没有写错。

内容的提问来源于stack exchange，提问作者Hardik