zoukankan      html  css  js  c++  java
  • vue+django开发配置(vue转发请求、跨域携带cookie)

    开发中:

    由于vue有个前端服务器做内容转发,所以前端服务器和后端服务器的交互是跨域的状态,不会携带cookie

    vue代理的作用:

    例如:前端服务器是127.0.0.1:8080,后端服务器是127.0.0.1:9000,那么前端访问后端资源就是跨域的,获取静态资源和调用后端接口都得定义一个地址才可正常访问

    代理会将设置的路径转发至127.0.0.1:9000,所以只需要配置好代理,前端就可以直接输入后端路径即可

    vue代理转发配置:

    (为了转发请求,上线时候不需要改代码)

    // vue.config.js中配置

    module.exports = {
      devServer: {
        host: "0.0.0.0",  // 前端启用的地址, 0.0.0.0表示绑定该机器的所有ip地址
        port: "8080",     // 前端启用的端口
        disableHostCheck: true,
        proxy: {
          '/api': {
            target: 'http://127.0.0.1:9000',  // 请求的域名 + 端口,当别人要访问时候不能是127.0.0.1
            changeOrigin: true,      // 是否跨域
          },
          '/static': {     //这里最好有一个 /
            target: 'http://127.0.0.1:9000',  // 后台接口域名
            changeOrigin: true,  //是否跨域
          }
        }
      },
    }

    // 当访问/static/image/1.png时候,代理会转发到http://127.0.0.1:9000/static/image/1.png

    django后端跨域配置:

    // 为了前端能正常请求非get请求,并且可以携带cookie

    安装模块:pip install django-cors-headers

    settings配置:

    1. INSTALLED_APPS中添加corsheaders

     2. 添加中间件

    'corsheaders.middleware.CorsMiddleware',

     3. 添加这个中间件的配置信息 // 底部即可

    CORS_ALLOW_CREDENTIALS = True
    CORS_ORIGIN_ALLOW_ALL = True
    CORS_ORIGIN_WHITELIST = (
        # 'http://127.0.0.1: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',
        'Cookie',
    )

    前端axios跨域携带cookie

    // axios跨域请求携带cookie

     withCredentials:true  // 请求携带cookie

    以上配置完就可以正常的vue和django合一开发了!

  • 相关阅读:
    【转】SVN与Git比较
    我遇到了Hibernate异常
    使用 Eclipse 远程调试 Java 应用程序
    linux显示桌面快捷键设置
    Ubuntu共享WiFi(AP)给Android方法
    用zd1211+Ubuntu 10.04实现的AP
    Ubuntu开机自动禁用无线网络
    戴尔大力宣传Ubuntu 对比与Windows的差异
    【SSH进阶之路】Spring的AOP逐层深入——采用注解完成AOP(七)
    【SSH进阶之路】Spring的AOP逐层深入——AOP的基本原理(六)
  • 原文地址:https://www.cnblogs.com/zezhou/p/13997819.html
Copyright © 2011-2022 走看看