从localhost:5000向localhost:8000发送GET请求遇阻求助

问题根源 #

浏览器的同源策略限制了不同端口（前端5000、后端8000）之间的脚本跨域请求。设置mode: 'no-cors'虽然能发送请求，但浏览器会屏蔽响应内容，返回opaque类型的空响应，无法获取接口返回的数据。

解决方案：给Flask后端配置CORS支持 #

步骤1：安装Flask-CORS扩展 #

在终端执行：

pip install flask-cors

步骤2：配置CORS规则 #

有两种常用配置方式，选一种即可：

方式一：全局允许指定域名跨域

在Flask应用中添加CORS全局配置，仅允许你的前端域名（http://127.0.0.1:5000）访问：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 只允许指定前端域名跨域，更安全
CORS(app, origins="http://127.0.0.1:5000")

@app.route('/items', methods=["GET"])
def getPrices():
    # 你的业务逻辑，生成stuff列表
    stuff = [{"x": "y"}, {"x": "z"}]
    return {
        "items": stuff
    }

方式二：仅给单个路由配置CORS

如果只想让/items接口支持跨域，给该路由添加装饰器：

from flask import Flask
from flask_cors import cross_origin

app = Flask(__name__)

@app.route('/items', methods=["GET"])
@cross_origin(origins="http://127.0.0.1:5000")
def getPrices():
    stuff = [{"x": "y"}, {"x": "z"}]
    return {
        "items": stuff
    }

步骤3：修改前端fetch代码 #

删除mode: 'no-cors'配置，现在后端允许跨域，不需要这个限制：

let response = await fetch(
   'http://127.0.0.1:8000/items',
   {
      method: 'GET'
});
// 解析JSON响应
const data = await response.json();
console.log(data);

补充说明 #

直接在浏览器地址栏访问http://127.0.0.1:8000/items正常，是因为这种方式属于浏览器直接发起的请求，不属于脚本触发的跨域AJAX请求，不受同源策略限制。

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