关于vue 、 django 分开部署时跨域无法访问的一种解决方法

最新推荐文章于 2024-04-21 08:39:16 发布

衍梦

最新推荐文章于 2024-04-21 08:39:16 发布

阅读量578

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43916778/article/details/104526694

版权

Django 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在网站的开发中有时会遇到跨域的问题大致分为如下几种情况

不同域名跨域: 如www.who.com 和 www.am.com
不同协议跨域:如http://www.who.com 和 https://www.who.com
不同端口跨域:如http://127.0.0.1:8000 和 http:127.0.0.1:8888
在本地进行测试的时候我们可以对vue配置代理的方式解决

// config/index.js
proxyTable: {
     '/api': {
       target: "127.0.0.1:8000", // 接口地址
       changeOrigin: true, 
       pathRewrite: {
         '^/api': '/api' // 重写路径
       }
     }
   },

但是我们在部署时这样是无法解决跨域问题的
我们可以使用 django-cors-headers 对 dango 做出相应的配置
例如
django部署在 example.a.com
vue部署在 example.b.com

# setting.py
# 0步 安装
	# pip install django-cors-headers
# 1步
	INSTALLED_APPS = [
		....
	    # 跨域配置
	    'corsheaders',
	]
# 2步
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    # 跨域中间件配置
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
# 3步
	# 是否允许所有主机跨域访问 默认是False 所以可不配
	# CORS_ORIGIN_ALLOW_ALL = False
	
	# 允许的跨站请求源列表
	CORS_ORIGIN_WHITELIST = [
	     'example.a.com',
	     # 'http://127.0.0.1:8888',
	     ...
	]
     
    # 正则表达式形式的 的跨站请求源列表
    # CORS_ORIGIN_REGEX_WHITELIST  =  [ 
    #	r “ ^ https：// \ w + \ .example \ .com $” ，
	#]
	
	# 允许的请求动词 
	CORS_ALLOW_METHODS  =  [ 
	    'DELETE',
	    'GET' ,
	    'OPTIONS' ,
	    'PATCH' ,
	    'POST' ,
	    'PUT' ,
	    # 自定义的请求动词
	    'POKE',
	]
	# 允许的请求动词 第二种导入方式
	from corsheaders.defaults import default_methods
	CORS_ALLOW_METHODS = list(default_methods) + [
		# 自定义的请求动词
	    'POKE',
	]
	
	# 非标准HTTP标头的列表
	CORS_ALLOW_HEADERS  =  [ 
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken' ,
    'x-requested-with',
	# 自定义的
	'token',
]

vue配置

 // src/main.js
 axios.defaults.baseURL = "http://example.a.com"; 
 // 这样发起异步请求时就不用在填写前面的链接了 例如请求http://example.a.com/api/v1/index/
    $axios.get('/api/v1/index/').then((response) =>{
                   console.log(response.data);
                }).catch(error=>{
                    console.log(error);
                })