Django3&Vue—跨域配置，亲测有效

最新推荐文章于 2024-08-08 07:46:04 发布

滴滴da

最新推荐文章于 2024-08-08 07:46:04 发布

阅读量479

点赞数

分类专栏： Django Vue 文章标签： django vue js python

本文链接：https://blog.csdn.net/weixin_45666249/article/details/114048255

版权

Django 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中配置devServer以实现跨域请求，以及在Django后端设置django-cors-headers中间件来允许跨域访问。详细步骤包括在vue.config.js中设置代理和在Django的settings.py中安装并配置corsheaders应用，确保前端和后端的跨域通信顺利进行。

摘要由CSDN通过智能技术生成

讲真，这玩意可把我整累了。

Vue端配置
vue.config.js下添加

module.exports = {
	devServer: {
		proxy: {																						// 跨域配置
			'/api': {
				target: 'http://127.0.0.1:8000',
				ws: true,
				changeOrigin: true,							
				pathRewrite: {																	// 路径重写
					'^/api': '/http://127.0.0.1:8000',
					'^/app01': '/http://127.0.0.1:8000/app01',
				}
			}
		}
	}
}

Django3端配置
安装django-cors-headers包

pip install django-cors-headers

settings.py下配置

INSTALLED_APPS = [
    ......
    'corsheaders',
    ......
]

MIDDLEWARE = [
    ......
    'corsheaders.middleware.CorsMiddleware',			# 注意顺序
    'django.middleware.common.CommonMiddleware',		# 要添加的在其上
    ......
]

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True