flask教程：使用flask_cors解决跨域问题

￡神魔★判官ぃ 2024-03-26 23:56 69阅读 0赞

## 极简代码演示 ##

#!/usr/bin/env python
    # -*- coding: utf-8 -*-
    
    
    from flask import Flask
    from flask_cors import CORS
    
    
    app = Flask(__name__)
    
    # r'/*' 是通配符，让本服务器所有的 URL 都允许跨域请求
    CORS(app, resources=r'/*',supports_credentials=True)

## 完整解决过程 ##

1.  确保在 Flask 的应用程序中正确配置了 CORS，并设置了 `supports_credentials=True`。以下是一个示例代码：
    
        from flask import Flask
        from flask_cors import CORS
        
        app = Flask(__name__)
        CORS(app, supports_credentials=True)
        
        # 添加接口路由和处理逻辑
        @app.route('/api/gen-jenkins-pipeline/web')
        def your_endpoint():
            # 处理接口逻辑
            pass
        
        # 启动 Flask 应用
        if __name__ == '__main__':
            app.run()
        ```
        
        确保 `supports_credentials=True` 设置为 `True`，以允许跨域请求携带凭据信息。
2.  确保在 Vue.js 的请求中设置了 `withCredentials: true`。例如，使用 Axios 发送请求时，确保在请求中设置了 `withCredentials: true`：
    
        axios.get('http://192.168.100.101:5000/api/gen-jenkins-pipeline/web', {
               withCredentials: true })
          .then(response => {
              
            // 处理响应
          })
          .catch(error => {
              
            // 处理错误
          });
        ```
        
        确保在发送请求时设置了 `withCredentials: true`，以便携带凭据信息。
3.  检查服务器端是否正确响应了 CORS 配置。可以使用开发者工具查看响应报头中的 `Access-Control-Allow-Credentials` 是否设置为 `true`。如果服务器端没有正确设置该报头，你可能需要检查服务器端的配置文件或进行其他相关设置。

如果你仍然遇到问题，请确保按照上述步骤进行了正确的设置，并仔细检查代码中的拼写和语法错误。如果问题仍然存在，可能需要进一步调查服务器端和前端的配置情况，以确定问题所在。