解决CORS问题的两种方式——Django+vue

文章目录

Django+vue的CORS问题

当前端与后端分处不同的域名,因为客户端访问不同源的服务端时会遭到浏览器的同源策略的拦截,所以我们需要配置CORS,一般开发中配置CORS有2种方案:

  1. web客户端的vue项目中配置vue.config.js实现跨域(使用vite搭建的vue项目,则配置文件是vite.config.js)
  2. api服务端的django项目中配置cors实现跨域

两种方式中可以任选其一,一起配置会冲突。

配置前端的vue.config.js

javascript 复制代码
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
    server: {
    	// 这行配置定义了开发服务器监听的端口号,当启动前端项目时,可以通过这个端口访问应用。默认情况下,许多前端项目(如Vue、React)使用3000端口,但这可以根据您的需要进行更改。
        port: '3000',
        // 这行配置定义了开发服务器监听的主机名。通常在本地开发时,我们使用localhost,但如果你想通过特定的域名来访问,可以在这里设置
        host: 'www.local.cn',
        
        proxy: {                         // 跨域代理
            '/api': {                    // 凡是遇到 /api 路径的请求,都映射到 target 属性
                // /api/header/  ---> http://api.luffycity.cn:8000/header/
                target: 'http://api.luffycity.cn:8000/',
                 // target属性定义了实际的后端服务地址,所有匹配到'/api'路径的请求都会被转发到这个地址。例如,如果前端发送请求到 '/api/header/',那么代理会将请求转发到 'http://api.local.cn:8000/header/'。
                changeOrigin: true,      // 是否允许跨域
                ws: true,                // 是否支持websocket跨域
                rewrite: path => path.replace(/^\/api/, '')  // 正则路径替换
            }
        }
    }
});

在前端开发中,跨域代理配置允许本地开发服务器,如Webpack Dev Server或Vite,通过代理功能将特定的API请求转发到实际的后端服务器,从而绕过浏览器的同源策略限制。这种配置利用了跨域资源共享(CORS)机制,通过设置HTTP响应头来允许跨源请求。
在代理规则中,可以使用正则表达式来匹配请求路径,并利用rewrite函数来重写URL,移除或替换特定的路径前缀,确保后端服务器能够正确识别和处理请求。此外,changeOrigin选项确保了请求头中的Origin字段与后端服务器域名一致,从而支持跨域请求,而ws: true选项则允许代理转发WebSocket请求,支持实时通信功能。

配置后端的settings.py

  1. 安装django-cors-headers

    bash 复制代码
    pip install django-cors-headers
  2. 配置settings.py

    python 复制代码
    INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'rest_framework',
    'corsheaders',
    
    'home',
    ]
    MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # cors跨域的中间件
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    ] 
  3. 添加客户端访问服务端的白名单,设置允许哪些客户端客户端跨域访问服务端,

    python 复制代码
    # CORS的配置信息: 
    
    # 方案1:
    # CORS_ORIGIN_WHITELIST = (
    #     'http://www.luffycity.cn:3000',
    # )
    # CORS_ALLOW_CREDENTIALS = False  # 不允许ajax跨域请求时携带cookie
    
    # 方案2:
    CORS_ALLOW_ALL_ORIGINS = True

在Django项目中,通过集成django-cors-headers库并对其进行配置,可以实现跨域资源共享(CORS)。首先,将corsheaders添加到INSTALLED_APPS中启用该应用,然后在MIDDLEWARE中包含CorsMiddleware以启用中间件处理CORS请求。设置CORS_ALLOW_ALL_ORIGINS = True允许所有域名进行跨域访问,而CORS_ALLOW_CREDENTIALS = True则允许跨域请求携带凭证,如Cookies.对于需要用户认证和保持会话状态的Web应用至关重要。
利用 HTTP 头来控制资源的共享策略,使得不同源的网页能够安全地请求和接收来自另一个源的资源。这是通过在服务器端设置响应头来实现的,而不是在客户端,因此它是一种服务器端的解决方案。
若有错误与不足请指出,关注DPT一起进步吧!!!

相关推荐
ggdpzhk23 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
会发光的猪。8 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客8 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
周全全9 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php
ZwaterZ9 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六9 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui