跨域
瀏覽器是不允許跨域訪問的保礼，現(xiàn)在我們調(diào)試vue時(shí)沛励，也就是在
npm run dev狀態(tài)下，vue其實(shí)在node臨時(shí)服務(wù)器上炮障。
django后端信息不能完全傳遞給其前端目派，或者直接被拒絕訪問。
跨域問題一般處于vue開發(fā)調(diào)試階段胁赢，等開發(fā)完畢后企蹭，就放在和django同一個(gè)服務(wù)器上，就不會(huì)跨域了智末。
跨域前后端都要設(shè)置
1. django后臺(tái)跨域
- 安裝跨域插件django-cors-headers
pip install django-cors-headers
- 安裝跨域插件django-cors-headers
- 配置插件
在openstack/settings.py中谅摄，找到
INSTALLED_APPS
在里面加入'corsheaders'
像這樣
- 配置插件
INSTALLED_APPS = [
'django.contrib.admin',
'horizon.apps.HorizonConfig',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders',
]
在openstack/settings.py中，找到
MIDDLEWARE
在里面加入'corsheaders.middleware.CorsMiddleware'
像這樣
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware',#必須放在這個(gè)位置
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
在settings.py中加入
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
'localhost:8080',
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)
注意：
CORS_ORIGIN_ALLOW_ALL
必須是False系馆，否則cookie傳遞不了
進(jìn)入horizon應(yīng)用目錄在開頭導(dǎo)入包
from django.views.decorators.csrf import csrf_exempt
在想要跨域的方法前一行加上@csrf_exempt
像這樣
@csrf_exempt
def index(request):
print('64654')
到此django后端跨域設(shè)置完成
2. Vue前端跨域
進(jìn)入先前創(chuàng)建的vue項(xiàng)目送漠，我的是front
image.png
在config/index.js中找到
proxyTable
在里面添加內(nèi)容
像這樣
proxyTable: {
'/api': {
target: 'http://127.0.0.1:8081/horizon',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
以后與后端請(qǐng)求時(shí)http://127.0.0.1:8081/horizon用/api做了代替
注意
至此前后端跨域問題已解決，接下來(lái)是前后端通信的方法由蘑。
