如何在Firefox中使用Fetch JS调用API？解决跨域CORS报错

你遇到的这个Cross-Origin Request Blocked错误，核心问题出在你搞反了CORS响应头的设置位置——Access-Control-Allow-Origin这个头是要由你的后端API服务器返回给浏览器的，而不是在前端的请求里携带。你现在在fetch的headers里加这个字段完全没用，浏览器根本不会认可，反而因为服务器没返回必要的CORS头，直接拦截了跨域请求。

问题根源拆解 #

浏览器的同源策略（Same Origin Policy）要求：当前端页面和API服务器的协议、域名、端口三者任意一个不同时，就属于跨域请求，这时候浏览器会要求服务器在响应中包含Access-Control-Allow-Origin等CORS相关头，否则就会拒绝让前端读取响应内容。

你的前端代码里在请求头加Access-Control-Allow-Origin: *是无效操作，这个字段是服务器用来告诉浏览器“哪些域名可以访问我”的，不是前端用来请求的。

解决方案：修改后端服务器配置 #

因为你的API路径是/python，推测你用的是Python系的Web框架，下面给两种常见框架的配置方法：

1. Flask框架（带扩展或手动设置） #

方法一：用flask-cors扩展（推荐）

先安装扩展：

pip install flask-cors

然后修改后端代码：

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
# 开发环境允许所有来源跨域，生产环境请替换成你的前端域名（比如["http://localhost:8080"]）
CORS(app, supports_credentials=True)  # supports_credentials对应前端的credentials: "include"

@app.route('/python', methods=['POST'])
def handle_post():
    # 解析前端发送的JSON数据
    req_data = request.get_json()
    print(req_data)  # 可以打印看看接收的数据
    # 这里写你的业务逻辑
    return jsonify({"message": "请求成功", "received_date": req_data.get("date")})

if __name__ == '__main__':
    app.run(port=3000, debug=True)

方法二：手动添加响应头

如果不想用扩展，也可以在每个接口的响应里手动加CORS头：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/python', methods=['POST'])
def handle_post():
    req_data = request.get_json()
    response = jsonify({"message": "请求成功", "received_date": req_data.get("date")})
    # 允许所有来源跨域
    response.headers['Access-Control-Allow-Origin'] = '*'
    # 允许携带凭证（对应前端的credentials: "include"）
    response.headers['Access-Control-Allow-Credentials'] = 'true'
    return response

if __name__ == '__main__':
    app.run(port=3000, debug=True)

2. FastAPI框架 #

FastAPI自带CORS中间件，直接配置即可：

from fastapi import FastAPI, Request
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel

app = FastAPI()

# 配置CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 生产环境替换为你的前端域名
    allow_credentials=True,
    allow_methods=["*"],  # 允许所有HTTP方法
    allow_headers=["*"],  # 允许所有请求头
)

# 定义请求体模型
class DateRequest(BaseModel):
    date: str

@app.post("/python")
async def handle_post(req: DateRequest):
    # 业务逻辑
    return {"message": "请求成功", "received_date": req.date}

修改前端代码（移除无效的请求头） #

把你前端fetch里的Access-Control-Allow-Origin头删掉，这个字段不属于请求头的范畴：

async function createRes(){ 
  try { 
    const connect = await fetch('http://127.0.0.1:3000/python', {
      method: "POST", 
      body: JSON.stringify({date:"01/02/2019"}), 
      headers: {"Content-Type": "application/json"},  // 只保留必要的Content-Type
      credentials: "include"
    }) 
    const data = await connect.json();
    console.log("请求成功返回数据：", data); // 新增日志查看返回结果
  } catch(error){ 
    console.log("请求出错：", error.message)
  } 
}

额外注意事项 #

• 生产环境安全建议：不要用*作为允许的来源，一定要指定你的前端实际域名（比如["https://your-frontend.com"]），避免任意网站都能调用你的API。
• 本地开发小技巧：如果你是直接打开本地的index.html（协议是file://），有些浏览器对file://的跨域请求限制很严格。建议用本地HTTP服务器运行前端，比如用http-server：

  npm install -g http-server
  cd 你的html文件目录
  http-server -p 8080
  

  然后通过http://localhost:8080访问前端页面，这样协议和后端一致，跨域处理更顺畅。

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