Flask解决Ajax跨域请求：CORS原理与Nginx代理方案
本文针对前后端分离开发中常见的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
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代理转发至目标服务器处理，最后将结果返回给页面。这种方式完美解决了跨域问题。
以上内容为本文的全部分享，希望能为各位的学习带来帮助，也欢迎大家继续支持本站。
免责声明：本文内容仅供参考，不代表本站观点。转载或引用请注明出处。
