Chrome扩展调用本地后端接口返回403错误求助

你遇到的问题是Chrome扩展的background.js发起GET请求到http://localhost:5000/receive_html返回403，但Postman请求正常。结合你提供的代码，以下是几个核心排查方向：

1. 后端未配置CORS（最可能原因） #

Postman作为独立客户端不受浏览器CORS策略限制，但Chrome扩展的请求属于浏览器环境，必须符合后端的跨域配置。你的后端代码中没有CORS相关设置，导致浏览器拦截了响应。

解决方法：
在Flask后端添加CORS支持，使用flask-cors库：

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
# 测试阶段允许所有来源，生产环境建议限制特定域名/扩展ID
CORS(app)

@app.route('/receive_html', methods=['GET'])
def receive_html():
    print("Received request")
    return jsonify({"message": "HTML received and saved successfully"}), 200

如果需要更严格的权限控制，可指定仅允许你的Chrome扩展来源（扩展ID可在chrome://extensions/开发者模式下查看）：

CORS(app, origins="chrome-extension://abcdefghijklmnopqrstuvwxyz")

2. 请求头差异触发后端拦截 #

Postman和Chrome扩展的请求头存在差异（比如User-Agent、Origin），如果后端有针对这些头的验证逻辑，会拒绝扩展的请求。

解决方法：

• 打开Chrome开发者工具（F12）的Network面板，查看扩展请求的Origin和User-Agent值
• 在后端添加允许这些头的配置，或者在扩展的fetch请求中模拟Postman的请求头：

fetch('http://localhost:5000/receive_html', {
    method: 'GET',
    headers: {
        // 替换成Postman实际使用的User-Agent
        'User-Agent': 'PostmanRuntime/7.36.3',
        // 替换成你的扩展Origin
        'Origin': 'chrome-extension://abcdefghijklmnopqrstuvwxyz'
    }
})
// 后续处理代码保持不变

3. 后端CSRF保护拦截请求 #

如果你的后端启用了CSRF保护（比如Flask-WTF的默认机制），部分配置下会拦截非浏览器表单的请求，即使是GET方法。

解决方法：
在后端路由中豁免CSRF验证：

from flask_wtf.csrf import csrf_exempt

@app.route('/receive_html', methods=['GET'])
@csrf_exempt
def receive_html():
    print("Received request")
    return jsonify({"message": "HTML received and saved successfully"}), 200

4. 扩展权限配置验证 #

虽然你的manifest.json已添加http://localhost/*权限，可尝试重新加载扩展确保权限生效：

• 打开chrome://extensions/
• 找到你的扩展，点击"重新加载"按钮

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