解决Flask和Web应用在Docker服务器上跨域请求(CORS)问题

霞舞
发布: 2025-10-12 09:00:06
原创
208人浏览过

解决flask和web应用在docker服务器上跨域请求(cors)问题

本文旨在帮助开发者解决在使用Python Flask作为后端,Web应用作为前端,并部署在托管的Docker服务器上时遇到的跨域资源共享(CORS)问题。文章将深入探讨CORS错误的常见原因,并提供一种通过前端反向代理来解决此问题的方案,同时也会提及Flask端的配置要点,确保前后端能够安全可靠地进行通信。

当Web应用(运行在https://frontend.apps.company.com)尝试从不同域的服务器(运行在https://backend.apps.company.com)请求资源时,浏览器会出于安全考虑,默认阻止这种跨域请求。这就是所谓的跨域资源共享(CORS)问题。 错误信息通常如下:

Access to fetch at 'https://backend.apps.company.com/hello' from
origin 'https://frontend.apps.company.com' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource
登录后复制

即使后端Flask应用已经配置了flask_cors,在本地环境测试通过,但在托管的Docker服务器上仍然出现CORS错误,这通常意味着问题不在于Flask应用本身,而在于服务器的配置或网络环境。

理解CORS和预检请求(Preflight Request)

CORS是一种浏览器安全机制,允许服务器声明哪些来源(域、协议和端口)的Web应用可以访问其资源。 当浏览器检测到跨域请求时,会先发送一个"预检"(preflight)请求,使用OPTIONS方法,询问服务器是否允许该跨域请求。 服务器必须正确响应这个预检请求,包含必要的Access-Control-Allow-Origin等头部信息,浏览器才会继续发送实际的请求。 如果预检请求失败,浏览器会阻止实际的请求,并显示CORS错误。

解决方案:前端反向代理

一种有效的解决方案是在前端设置一个反向代理。 前端应用的所有API请求都先发送到前端服务器(例如Nginx),然后由前端服务器将这些请求转发到后端服务器。 这样,对于浏览器来说,所有的请求都来自同一个域,从而绕过了CORS限制。

Nginx配置示例:

假设前端应用运行在https://frontend.apps.company.com,后端API运行在https://backend.apps.company.com,我们希望将所有以/api开头的请求转发到后端。

AppMall应用商店
AppMall应用商店

AI应用商店,提供即时交付、按需付费的人工智能应用服务

AppMall应用商店 56
查看详情 AppMall应用商店
server {
    listen 9080; # 前端监听端口
    server_name frontend.apps.company.com; # 前端域名

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html; # 处理单页应用路由
    }

    location /api {
        proxy_pass https://backend.apps.company.com; # 将/api请求转发到后端
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 启用CORS (可选,但建议配置)
        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

        if ($request_method = OPTIONS) {
            add_header 'Access-Control-Allow-Origin' "$http_origin" always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        proxy_http_version 1.1;
        proxy_request_buffering off;
        proxy_buffering off;
    }
}
登录后复制

修改前端代码:

将前端代码中对后端API的请求地址从https://backend.apps.company.com/hello 修改为 https://frontend.apps.company.com/api/hello。

重要说明: proxy_set_header 指令用于传递原始请求的信息到后端服务器,这些信息在后端可能需要使用,例如获取客户端的IP地址。

Flask端的配置

即使使用了前端反向代理,在Flask端也建议进行CORS配置,以增加安全性。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 允许来自任何域的跨域请求
CORS(app, supports_credentials=True)

@app.route("/hello")
def hello():
    return {"message": "Hello from backend!"}

if __name__ == '__main__':
    app.run(debug=True)
登录后复制

supports_credentials=True 允许在跨域请求中发送cookie和授权头,这对于需要身份验证的API非常重要。

注意事项和总结

  1. 服务器配置: 确保服务器(例如Nginx)正确配置了反向代理和CORS头部。
  2. 域名解析: 确保前端和后端的域名都正确解析到对应的服务器IP地址。
  3. HTTPS: 如果使用HTTPS,请确保SSL证书配置正确,并且所有请求都使用HTTPS协议。
  4. 预检请求: 仔细检查预检请求的响应头部,确保包含了Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers等必要的头部信息。
  5. 托管环境: 在托管的Docker服务器上,可能存在额外的网络层或代理,需要与平台工程师沟通,确保CORS配置正确。

通过前端反向代理,可以有效地解决在托管的Docker服务器上遇到的CORS问题。 同时,在Flask端进行适当的CORS配置,可以进一步增强应用的安全性。在实际部署中,需要根据具体的网络环境和服务器配置进行调整,确保前后端能够安全可靠地进行通信。

以上就是解决Flask和Web应用在Docker服务器上跨域请求(CORS)问题的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号