Flask解决Ajax跨域请求：CORS原理与Nginx代理方案

Hazel

发布时间：2026-10-13 | 5人浏览过

原创

本文针对前后端分离开发中常见的Ajax跨域问题，详细解析了CORS机制及Access-Control-Allow-Origin头的作用。通过Flask框架的flask-cors插件安装、源码配置及响应头手动添加三种后端方案，结合Nginx反向代理的重写规则，提供了完整的跨域解决思路，帮助开发者快速排除接口对接障碍。

业务场景分析

在前后端分离的项目架构中，前端页面需要与后端数据接口进行频繁的数据交互。

此前接口测试已在Postman中完成，今日正式进入前端对接阶段。鉴于这是本人首次独立负责后端接口开发，过程中遇到了诸多典型问题，特此记录并分享这段踩坑经历，旨在加深理解并促进实际应用。

遇到的核心问题

前端发起Ajax请求调用后端接口时，遭遇了跨域访问被拒绝的错误，具体报错信息见下图。

错误信息明确指出：由于响应头中缺失“Access-Control-Allow-Origin”字段，浏览器安全机制阻止了数据返回给前端。

深入解析Access-Control-Allow-Origin

Access-Control-Allow-Origin是HTML5规范中定义的一种用于解决Web资源跨域访问问题的策略机制。

浏览器出于安全考虑，默认仅允许请求当前域的资源，而对其他域的资源持不信任态度。那么，究竟何种情况会被判定为“跨域”呢？

请求协议http,https存在差异
域domain标识不一致
端口port号不匹配

简而言之，跨域是指浏览器出于安全限制，禁止执行来自其他网站的脚本代码。这种现象源于浏览器的同源策略（Same-Origin Policy）。

所谓“同源”，必须同时满足三个条件：协议相同、域名相同、端口相同。只有三者完全一致，才被视为同源。

浏览器的同源策略自诞生之初便存在，其核心规则是：禁止从域名A下的页面（通常通过Ajax请求）获取域名B下的资源。

跨域资源共享（CORS）是浏览器提供的一种跨域协商机制，允许前后端协商是否允许发起跨域请求。CORS通过添加若干Access-Control-Request-xxx请求头，由客户端声明自己的源、期望使用的头部及请求方法；同时添加若干Access-Control-Allow-xxx响应头，由服务端声明其支持的跨域源、头部及方法。

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

后端解决方案

1. 配置后端接口允许跨域请求

以Python Flask框架为例，主要有两种实现方式。

第一种方法是使用第三方插件。只需安装该插件，即可轻松为所有接口自动添加所需的响应头。

复制代码代码如下:

pip3 install flask-cors

pip3 install flask-cors

from flask_cors import *

app = Flask(__name__)
# r'/*' 是通配符，让本服务器所有的URL 都允许跨域请求 
CORS(app, resources=r'/*')

其原理实质上是为接口响应头添加“Access-Control-Allow-Origin”并设置值为“*”，表示允许所有网站发起请求。

第二种方法是在接口函数中自定义添加属性。

res.headers['Access-Control-Allow-Origin'] = '*'
return res

通过为返回结果res的headers属性设置“Access-Control-Allow-Origin”值为“*”，该配置仅对当前特定接口生效。

2. 利用Nginx反向代理

Nginx以其强大的功能著称，常用于解决各类复杂的网络配置难题。

通常可用于充当静态页面服务器、静态文件缓存服务器、网站反向代理或负载均衡服务器等。实现这些功能，往往只需修改其配置文件即可。

server {
    listen    80;
    server_name localhost;
　　　　　　location / {
      proxy_pass http://localhost:81;
      proxy_redirect default;
    }

		location /apis { #添加访问目录为/apis的代理配置

			rewrite ^/apis/(.*)$ /$1 break;
			proxy_pass  http://localhost:82;
    }
}

根据配置信息，我们让Nginx监听localhost的80端口，而本地的81端口服务则通过localhost的80端口进行访问。

我们特别配置了对“/apis”目录的访问规则，并对URL执行了重写操作，使得所有以“/apis”开头的地址请求都被转发至“http://localhost:82”进行处理。

指令rewrite ^/apis/(.*)$ /$1 break的含义是：重写拦截进来的请求，且该规则仅对域名后以“/apis”开头的路径起作用，例如www.a.com/apis/msg?x=1。其中，^/apis/(.*)$是正则表达式，$1代表正则中第一个括号()内的内容，$2代表第二个括号的内容，依此类推；break表示匹配成功后停止后续匹配。

总结来说，搭建Nginx并将相关代码部署在服务器本机，前端页面请求本域名的一个地址，由Nginx代理转发至目标服务器处理，最后将结果返回给页面。这种方式完美解决了跨域问题。

以上内容为本文的全部分享，希望能为各位的学习带来帮助，也欢迎大家继续支持本站。