Vue+Flask 接口跨域解决方法

在前后端分离项目中常见到跨域的问题,记录一下Flask作为后端,Vue作为前端的项目时,跨域的解决方式。

Vue处理方法

使用axios调用接口,在方法后加上{headers: {"Access-Control-Allow-Origin": "*"}}
例如:

func(){
        const path = "http://127.0.0.1:5000/func"
        axios.post(path, {headers: {"Access-Control-Allow-Origin": "*"}})
        .then(res => {
            console.log('加载完成');
        })
        .catch(error => {
            console.error(error);
            console.log('加载失败');
        });
          }
        },

Flask处理方法

引入flask_cors,加上CORS(app, supports_credentials=True)即可

from flask_cors import *

app = Flask(__name__)
#跨域处理
CORS(app, supports_credentials=True)

#init the app
app.run(debug=True,host="127.0.0.1",port=5000)
<think>好的,用户想了解如何将VueFlask集成或进行开。我需要整理一个清晰的步骤指南,确保涵盖前后端分离的配置、处理、API交互以及部署方法。 首先,根据引用[1]和[2],常见的集成方式有两种:模板渲染和前后端分离。模板渲染可能比较简单,但现代开更倾向于前后端分离,所以重点放在后者。需要提到创建VueFlask项目,并分别管理。 然后,问题很重要。引用[2]中提到使用flask-cors扩展,需要详细说明如何安装和配置CORS,确保Vue前端能访问Flask的API。 接下来是API设计部分。Flask需要提供RESTful接口,比如使用/json的例子,而Vue使用axios进行调用。这部分需要代码示例,包括Flask的路由和Vue的组件方法。 部署方面,用户可能想知道如何将Vue构建后的静态文件整合到Flask中。需要解释npm run build生成dist文件夹,然后配置Flask的静态路由,引用[4]中的模板项目可能有相关参考。 还要考虑开时的代理配置,比如在vue.config.js中设置代理,解决环境中的问题,这样前端开服务器可以正确转API请求Flask后端。 另外,可能用户需要知道项目结构的最佳实践,比如将VueFlask放在同一仓库的不同目录,或者分开管理。引用[3]和[4]提到了具体的项目结构,可以建议参考这些模板。 需要检查是否有遗漏的步骤,比如安装依赖、环境变量设置,或者常见的错误处理。比如,在Flask中返回JSON时使用jsonify,确保正确的Content-Type。 最后,提供相关的问题,帮助用户深入,比如性能优化、登录验证、项目结构优化等,参考之前的引用内容,确保问题覆盖可能遇到的后续疑问。</think>以下是分步指南说明如何实现Vue.jsFlask的集成开,包含两种主流集成模式: ### 一、基础环境准备 1. 安装Node.jsPython环境 2. 创建项目文件夹 ```bash mkdir myproject && cd myproject ``` ### 二、前后端分离模式(推荐) #### 步骤1:创建Vue前端 ```bash npm install -g @vue/cli vue create frontend # 选择axios插件 ``` #### 步骤2:创建Flask后端 ```bash mkdir backend && cd backend python -m venv venv source venv/bin/activate pip install flask flask-cors ``` #### 步骤3:配置访问 在`backend/app.py`中添加: ```python from flask_cors import CORS app = Flask(__name__) CORS(app, resources={r"/api/*": {"origins": "*"}}) ``` #### 步骤4:创建API接口 ```python @app.route('/api/data') def get_data(): return jsonify({"message": "Hello from Flask!"}) ``` #### 步骤5:前端调用接口Vue组件中使用: ```javascript axios.get('http://localhost:5000/api/data') .then(response => { this.message = response.data.message }) ``` ### 三、模板整合模式 #### 步骤1:构建Vue项目 ```bash cd frontend npm run build ``` #### 步骤2:整合到Flask模板 将生成的`dist`文件夹复制到Flask的`static`目录,创建路由: ```python @app.route('/') def index(): return render_template('index.html') ``` ### 四、开环境配置 1. 创建`vue.config.js`配置代理: ```javascript module.exports = { devServer: { proxy: 'http://localhost:5000' } } ``` ### 五、项目结构示例 ``` myproject/ ├── frontend/ # Vue项目 │ ├── src/ │ └── package.json └── backend/ # Flask项目 ├── app.py └── requirements.txt ``` ### 六、运行流程 1. 启动Flask后端: ```bash flask run ``` 2. 启动Vue前端: ```bash npm run serve ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值