Vue中如何跨域请求数据(webpack、node.js和django中实现)
一、webpack中设置跨域:
webpack提供了配置代理的方法解决跨域:
1、在vue-cli项目中打开webpack.dev.cof.js,如下:
其中,proxy: config.dev.proxyTable为配置代理。
2、打开conifg目录下的index.js,在 proxyTable中进行配置:
3、配置好后,就可以获取后台提供的接口,然后进行页面的渲染了:
二、axios请求的接口提供服务端设置跨域:
1、axios不支持jsonp,因为axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净;
2、在使用axios发送请求时,服务器端设置
可以正确得到结果。
3、实例:
3.1 node.js代码
3.2 django代码:
settings.py中:
(1) 安装 django-cors-headers:
(2) 添加到已安装的应用程序中:
(3) 添加中间件类来收听响应:
注意:要放在中间件(common.CommonMiddleware)的上面,涉及到请求响应的顺序问题。
(4) 跨域配置:
在settings文件最后面添加如下所有代码
echarts.vue代码: