前端调用本地5000端口预测接口触发CORS跨域拦截求助

这是标准的CORS跨域拦截报错：你现在是直接双击本地HTML文件通过file://协议打开的前端页面，所以请求源显示为null，当你向http://127.0.0.1:5000的后端接口发POST请求时，浏览器同源策略会判定这是跨源请求，只要后端响应没带Access-Control-Allow-Origin头就会直接拦截。

方案1：后端直接配置CORS允许跨域（本地开发首选，改动最小） #

1. 先在Flask运行的Python环境安装依赖：

pip install flask-cors

2. 在Flask项目的入口文件中添加CORS初始化配置：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 放开所有路由的跨域限制，本地开发场景足够用
CORS(app)

# 你原来的/predict_home_price路由逻辑保持不变

修改完重启Flask服务，再点击预估价格按钮就不会触发拦截。

方案2：把前端静态文件交给Flask托管，从根源避免跨域 #

如果不想额外装CORS依赖，就不要直接双击打开本地HTML文件，把前端资源放到Flask项目对应目录下，让前后端同属5000端口的源，自然不会触发跨域校验：

• 调整项目目录结构：

your_house_price_project/
├── server.py # 你的Flask主运行文件
├── templates/
│   └── index.html # 房价预估的前端页面
└── static/
    ├── script.js # 包含onClickedEstimatePrice逻辑的脚本文件
    └── style.css # 页面样式文件

• 在server.py中添加首页路由：

from flask import render_template

@app.route('/')
def index():
    return render_template('index.html')

• 启动服务后直接访问http://127.0.0.1:5000打开页面即可，原有接口请求逻辑不需要改动。

你代码里注释提到的nginx反代方案是正式上线部署时用的，本地开发阶段选上面任意一个方案就能解决问题。

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