跨域

浏览器是不允许跨域访问的，现在我们调试vue时，也就是在
npm run dev状态下，vue其实在node临时服务器上。
django后端信息不能完全传递给其前端，或者直接被拒绝访问。
跨域问题一般处于vue开发调试阶段，等开发完毕后，就放在和django同一个服务器上，就不会跨域了。

跨域前后端都要设置

1. django后台跨域

• 1. 安装跨域插件django-cors-headers
     pip install django-cors-headers
• 2. 配置插件
     在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',#必须放在这个位置
    '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传递不了
进入horizon应用目录在开头导入包
from django.views.decorators.csrf import csrf_exempt
在想要跨域的方法前一行加上@csrf_exempt
像这样

@csrf_exempt
def index(request):
    print('64654')

到此django后端跨域设置完成

2. Vue前端跨域

进入先前创建的vue项目，我的是front

image.png

在config/index.js中找到
proxyTable
在里面添加内容
像这样

    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:8081/horizon',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

以后与后端请求时http://127.0.0.1:8081/horizon用/api做了代替

注意

至此前后端跨域问题已解决，接下来是前后端通信的方法。