最近做一个简单的系统,采用了前端 VUE,后端 flask 的方式。但是当 vue 调用 flask 的时候,跨域问题报错了。记录一下解决方案
1、flask 里面发布接口/get_table_data
2、vue main.js 中引入 axios,并设置 baseURL :
import axios from 'axios'
axios.defaults.baseURL = '/api' // 开发本地代理
Vue.prototype.$axios = axios
3、vue2.0 的 config/index.js 中,修改 proxyTable 为如下:
proxyTable: {
'/api': { //代理地址
target: 'http://127.0.0.1:5000/', //需要代理的地址, 实际生产环境需要访问的地址
changeOrigin: true, //是否跨域
pathRewrite: {
'/api': '/' //本身的接口地址没有 '/api' 这种通用前缀,所以要 rewrite,如果本身有则去掉
}
}
},
4、vue 文件中,调用方法的如下:
5、重启 vue。
6、遇到的问题:
(1)设置代理后,原http://127.0.0.1:5000http://localhost:8080/api/get_table_data的请求,会显示调用地址为:
代理为 api,只是 vue 内部处理 url 的前缀,不需要发布的 url 改成这个前缀。