Flask跨域问题解决与Docker配置教程

在使用Python Flask构建后端，Web应用作为前端并部署在Docker服务器时，跨域资源共享(CORS)问题是开发者常遇到的挑战。本文针对这一问题，深入剖析CORS错误的根本原因，并提供一种高效的解决方案：**前端反向代理**。通过Nginx配置示例，详细展示如何将前端应用API请求转发至后端服务器，巧妙绕过浏览器的CORS限制，实现前后端安全通信。同时，文章还强调了Flask端的CORS配置要点，并辅以代码示例，助力开发者构建更安全的应用。此外，文章还分享了Docker配置技巧，确保在托管环境中CORS配置正确，为Web应用的稳定运行保驾护航。

本文旨在帮助开发者解决在使用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开头的请求转发到后端。

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跨域问题解决与Docker配置教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！