文章目录
- Django+vue的CORS问题
- 配置前端的vue.config.js
- 配置后端的settings.py
Django+vue的CORS问题
当前端与后端分处不同的域名，因为客户端访问不同源的服务端时会遭到浏览器的同源策略的拦截，所以我们需要配置CORS，一般开发中配置CORS有2种方案：
- web客户端的vue项目中配置vue.config.js实现跨域（使用vite搭建的vue项目，则配置文件是vite.config.js）
- api服务端的django项目中配置cors实现跨域
两种方式中可以任选其一，一起配置会冲突。
配置前端的vue.config.js
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
-
安装django-cors-headers
pip install django-cors-headers -
配置settings.py
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', ] -
添加客户端访问服务端的白名单，设置允许哪些客户端客户端跨域访问服务端，
# 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一起进步吧！！！
