安装
cnpm install --save axios
引入 axios
前端解决跨域
flask 后端代码,
from flask importrender_template, json, jsonify,Flaskfrom flask_cors importCORS, cross_origin
app= Flask(__name__)
@app.route('/api/getdata')defindex():
data={'name':'test'}returnjsonify(data)if __name__ == '__main__':
app.run(debug=True,host='0.0.0.0')
tets.py
App.vue 前端跨域配置methods 请求后端参数
Hello App!
Go to Foo
Go to Bar
User
{{name_data}}
name:'app',
data() {return{
userid:"1233232",
name_data:'', //定义name返回值
}
},
methods: {//挂载完成出发，跨域操作
getdata(){
this.$axios.get('/api/getdata').then((response)=>{
console.log(response.data)
this.name_data= response.data.name //拿到后返回name值
}).catch((response)=>{
console.log(response)
})
}
},
mounted() {
this.getdata()
}
}
App.vue
indwx.js 前端解决跨域
proxyTable: {
'/api': {
changeOrigin: true,
target: 'http://10.12.30.70:5000',
pathRewrite: {
'^/api': '/api'
}
}
},
main.js
index.js
接收到 后端返回的 name：test. 前端渲染
flaks后端解决跨域：
生产环境中打包，没有前端跨域，所以使用后端跨域
跨域是指：浏览器A从服务器B获取的静态资源，包括Html、Css、Js，然后在Js中通过Ajax访问C服务器的静态资源或请求。即：浏览器A从B服务器拿的资源，资源中想访问服务器C的资源。
同源策略是指：浏览器A从服务器B获取的静态资源，包括Html、Css、Js，为了用户安全，浏览器加了限制，其中的Js通过Ajax只能访问B服务器的静态资源或请求。即：浏览器A从哪拿的资源，那资源中就只能访问哪。
同源是指：同一个请求协议(如：Http或Https)、同一个Ip、同一个端口，3个全部相同，即为同源。
前后端分离在开发调试阶段本地的flask测试服务器需要允许跨域访问，简单解决办法有
1、使用 flask_cors
pip3 install flask_cors
flask.py 后端代码， 加上这一条即可
CORS(app, supports_credentials=True)
from flask importrender_template, json, jsonify,Flaskfrom flask_cors importCORS, cross_origin
app= Flask(__name__)
CORS(app, supports_credentials=True) #加上这一条就实现跨域了
@app.route('/api/getdata')defindex():
data={'name':'test'}returnjsonify(data)if __name__ == '__main__':
app.run(debug=True,host='0.0.0.0'
test.py
App.vue 去掉 index.js中的 proxyTable。
Hello App!
Go to Foo
Go to Bar
User
{{name_data}}
name:'app',
data() {return{
userid:"1233232",
name_data:'', //定义name返回值
}
},
methods: {//挂载完成出发，跨域操作
getdata(){
this.$axios.get('http://10.12.30.70:5000/api/getdata').then((response)=>{
console.log(response.data)
this.name_data= response.data.name //拿到后返回name值
}).catch((response)=>{
console.log(response)
})
}
},
mounted() {
this.getdata()
}
}
View Code
可以添加头部信息，在想要的时候添加头部信息：
2、在想要的时候添加头部信息：
@app.after_requestdefaf_request(resp):"""#请求钩子，在所有的请求发生后执行，加入headers。
:param resp:
:return:"""resp=make_response(resp)
resp.headers['Access-Control-Allow-Origin'] = '*'resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
return resp
View Code
nginx解决跨域问题
flask 后端
from flask importrender_template, json, jsonify,Flaskfrom flask_cors importCORS, cross_origin
app= Flask(__name__)#CORS(app, supports_credentials=True) # 加上这一条就实现跨域了
@app.route('/api/getdata')defindex():
data={'name':'test'}returnjsonify(data)if __name__ == '__main__':
app.run(debug=True,host='0.0.0.0'
test.py
nginx配置
location /{
proxy_pass http://127.0.0.1:8080; ###vue
}
location/api {
proxy_pass http://127.0.0.1:5000; ###后端服务
}
nginx.config
App.vue 中接口访问nginx代理就可以
