Vue flask前后端分离解决跨域

安装axios
- 在项目目录下输入：npm install axios--save-dev

配置axios

在main.js中引入axios

import axios from  'axios'
// 修改内部的$http为axios
Vue.prototype.$axios = axios;
//同时将请求的url替换为后端服务器的端口
axios.defaults.baseURL='http://127.0.0.1:5000/';

使用asios

添加一个测试的vue:Test.vue

<template><div>这是测试模块<button @click="TestHttp">{{ msg }}</button><Footer></Footer></div>
</template><script>
import Footer from "../components/Footer.vue";export default {name: "Test",data() {return {msg: "Hello World!",};},methods: {TestHttp() {const path = "home";this.$axios.get(path).then((res) => {//用res接收后端的返回this.msg = res.data;}).catch((error) => {//捕获错误// eslint-disable-next-lineconsole.error(error);});},},components: {Footer,},
};
</script><style>
</style>

后端flask导入cors包：from flask_cors import CORS，或者通过pip install flask_cors来进行安装。

在app.py中输入CORS(app)即可完成后端的跨域设置

from flask import Flask
from flask_cors import CORSapp = Flask(__name__)
CORS(app)@app.route('/')
def hello_world():return 'Hello asd!'@app.route('/home')
def home():return 'Hello home!'if __name__ == '__main__':app.run()

分别启动后端与前端
- 点击 hello world按钮，获得后端返回
分别启动后端与前端
- [外链图片转存中…(img-9y7ymcp1-1675225926189)]
- 点击 hello world按钮，获得后端返回

Vue flask前后端分离解决跨域相关推荐

Vue+Flask前后端分离 Vue3跨域配置
Vue+Flask前后端分离 Vue3跨域配置前端端口号为8080 后端端口号为5000 问题描述问题解决接口路径映射前端端口号为8080 后端端口号为5000 后端端口API 代码片. @a ...
vue解决线上跨域的问题_vue前后端分离解决跨域问题
用Vue-cli脚手架搭建了个demo,前后分离就有跨域问题的出现. vue-clie搭建demo步骤(传送门):https://www.cnblogs.com/wangenbo/p/8487764. ...
跨域详解！前后端分离解决跨域问题
文章目录一.为什么会出现跨域问题二.什么是跨域三.非同源限制四.跨域问题的解决方式 Jsonp前后端配合前端修改后端修改 CORS 详解响应头 5. SpringBoot解决 [方式一]全 ...
解决java前后端分离端口跨域问题
解决java前后端分离端口跨域问题参考文章: (1)解决java前后端分离端口跨域问题 (2)https://www.cnblogs.com/mollie-x/p/10449686.html 备忘一 ...
前后端分离的跨域解决方案
声明: 在以往的开发中,前后端分离也不是像现在这么热门,所谓的前端工程师也只不过是写好静态页面由Java工程师或者php工程师嵌入到页面中进行开发,这或许加重了这些工程师的工作量,而且在样式调试上由纯 ...
前后端分离项目跨域问题及解决方案
目录 1.什么是跨域 2.前后端分离项目中的跨域问题 3.方法一:SpringBoot后端进行处理 4.方法二:在Vue前端进行处理 5.总结 1.什么是跨域请求同域资源: 在域名 (或 ip 地址 ...
Spring Boot2.x-13前后端分离的跨域问题解决方法之Nginx
文章目录概述浏览器同源策略后台搭建 pom.xml interceptor 配置 Controller 启动测试浏览器和session 后端工程发布到服务器上问题复现通过Nginx反向代理 ...
前后端分离与跨域的解决方案（CORS的原理）
前后端分离前后端分离的好处最大的好处就是前端JS可以做很大部分的数据处理工作,对服务器的压力减小到最小. 后台错误不会直接反映到前台,错误接秒较为友好. 由于后台是很难去探知前台页面的分布情况,而 ...
06-若依前后端分离项目跨域问题解决方式
什么是跨域跨域就是前后端分离项目前端无法把session等信息传递给后端服务器.跨域源自浏览器同源策略.同源策略是一种约定,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互. ...

Vue flask前后端分离解决跨域

Vue flask前后端分离解决跨域

Vue flask前后端分离解决跨域相关推荐

最新文章

热门文章