本文旨在帮助开发者解决在使用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' fromorigin '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 Flaskfrom flask_cors import CORSapp = 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配置，可以进一步增强应用的安全性。在实际部署中，需要根据具体的网络环境和服务器配置进行调整，确保前后端能够安全可靠地进行通信。
以上就是解决Flask和Web应用在Docker服务器上跨域请求(CORS)问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1377238.html
微信扫一扫 
支付宝扫一扫 
