Nginx+Flask+Ajax跨域请求问题处理

最新推荐文章于 2024-09-13 07:25:34 发布

原创最新推荐文章于 2024-09-13 07:25:34 发布 · 898 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Nginx #Flask #Ajax #跨域

Nginx 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了Ajax跨域问题的成因及解决方案，重点介绍了使用Nginx反向代理和Flask服务端配置来实现跨域请求的方法。

写在前面

还是和上一篇同一个项目，不过遇到的问题不同，所以分成两篇blog了（假装很高产hhh），这次是Ajax带来的跨域问题，场景是对子域名sub.a.cn发出的请求（80端口）要转发到服务器的1024端口上，对于非Ajax请求没有问题，但Ajax请求会在浏览器控制台抛出错误：SEC7120: [CORS] 原点“http://XXX”未在“http://XXXXXX”的 cross-origin 资源的 Access-Control-Allow-Origin response header 中找到“http://XXX”。

Ajax跨域问题

什么是跨域呢？当客户端通过Ajax方式向服务端发送Ajax请求时，如果客户端和服务端不在一个域（如协议、端口、域名不一致），浏览器出于安全考虑，会对Ajax请求做校验，不通过时会抛出跨域错误（所以是浏览器的锅，并不是服务端的原因）

解决方案：

禁止浏览器做跨域校验（不实际，需要每个用户对浏览器进行操作）
Nginx反向代理做设置，对返回给浏览器的响应加header（让浏览器认为是同个域下的）
服务端修改，让服务端返回给nginx的响应支持跨域

实现：

nginx（代理）设置：

server{
    listen 80;
    server_name sub.a.cn;

    location / {
        proxy_pass http://localhost:1024;
        add_header Access-Control-Allow-Methods * always;
        add_header Access-Control-Max-Age 3600 always;
        add_header Access-Control-Allow-Credentials true always;


        add_header Access-Control-Allow-Origin $http_origin always;
        add_header Access-Control-Allow-Headers $http_access_control_request_headers always;
    }
}

flask（服务端）设置：
（1）安装跨域模块：pip install flask-cors
（2）导入模块并设置跨域：

from flask import Flask
from flask_cors import *  # 导入模块
app = Flask(__name__)
CORS(app, supports_credentials=True)  # 设置跨域

参考

[1] ajax跨域完全讲解
[2] Ajax跨域问题详解
[3] Flask允许跨域