本文旨在帮助开发者解决在使用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非常重要。
注意事项和总结
- 服务器配置： 确保服务器（例如Nginx）正确配置了反向代理和CORS头部。
- 域名解析： 确保前端和后端的域名都正确解析到对应的服务器IP地址。
- HTTPS： 如果使用HTTPS，请确保SSL证书配置正确，并且所有请求都使用HTTPS协议。
- 预检请求： 仔细检查预检请求的响应头部，确保包含了Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers等必要的头部信息。
- 托管环境： 在托管的Docker服务器上，可能存在额外的网络层或代理，需要与平台工程师沟通，确保CORS配置正确。
通过前端反向代理，可以有效地解决在托管的Docker服务器上遇到的CORS问题。 同时，在Flask端进行适当的CORS配置，可以进一步增强应用的安全性。在实际部署中，需要根据具体的网络环境和服务器配置进行调整，确保前后端能够安全可靠地进行通信。
