vue与django跨域问题

最新推荐文章于 2024-07-04 09:42:17 发布

lesrose

最新推荐文章于 2024-07-04 09:42:17 发布

阅读量688

点赞数

文章标签： vue django

本文链接：https://blog.csdn.net/picoor/article/details/103539738

版权

问题出现环境：使用vue cli工具进行前端开发，在组件中使用axios向 django 服务器发起get请求

vue cli 服务器地址为http://192.168.11.156:8080/#/

请求的目的地址为http://192.168.11.156:8000/polls/home

vue cli工具服务器默认使用8080端口，django 默认使用8000 端口，端口不一致，所以跨域

解决方案：

方案1：

在vue cli创建的项目根目录创建vue.config.js

module.exports = {
  devServer: {
    proxy: 'http://192.168.11.156:8000'
  }
}

proxy字段的值即是请求的目的IP和端口号，

前端组件的请求格式如下：

let url="/polls/home"
	let params=null
	this.$axios.get(url,params).then(res=>{
		console.log(res)
		this.data=res.data
	}).catch(err=>{
		console.log(err)
	})

url的值即为请求目的IP的路由部分

方案2：

在vue cli创建的项目根目录创建vue.config.js

module.exports = {
	devServer: {
		proxy: {
			'/api': {
				target: 'http://192.168.11.156:8000',
				ws: true,
				changeOrigin: true,
				pathRewrite: {
					'^/api': '/polls'
				}
			},
			'/foo': {
				target: '<other_url>'
			}
		}
	}
}

proxy字段为路由代理的具体设置

‘/api’的target字段为路由转换的目标ip与端口号

pathRewrite字段为路径重写

前端组件的请求格式如下：

let url="/api/home"
	let params=null
	this.$axios.get(url,params).then(res=>{
		console.log(res)
		this.data=res.data
	}).catch(err=>{
		console.log(err)
	})

这里的url和刚才的有所不同，在解析路由时，会将‘/api’解析为‘polls’,因为我们已经通过pathRewrite字段进行了路由重写

以上只是本在在遇到跨域问题后，经过百度搜索自己总结的一些拙见，如有不正，希望大家指教，

https://cli.vuejs.org/zh/config/#devserver-proxy