前后端分离的django项目服务器跨域

本文介绍如何使用django-cors-headers解决Django后端与Vue前端开发中的跨域问题,包括安装步骤及配置方法。

具体详情:https://github.com/ottoyiu/django-cors-headers
网站后端与前端分离开发的时候会存在跨越问题,例如后端是django写的,地址是http://127.0.0.1:8000,前端是vue写的,地址是http://127.0.0.1:8080,在后端向前端传递数据时就存在跨域问题,从而报错。
安装

pip install django-cors-headers

在settings.py中设置

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

添加一个 middleware class
CorsMiddleware 要放在尽可能靠前的位置,尤其是任何能产生responses 的 middleware 前,例如 Django’s CommonMiddleware 和Whitenoise’s WhiteNoiseMiddleware.

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

设置CORS_ORIGIN_ALLOW_ALL为true

CORS_ORIGIN_ALLOW_ALL =True 
### 如何运行前后端分离Django项目 #### 启动后端服务器 为了启动后端服务器,在项目的根目录下可以使用如下命令来启动开发服务器[^2]: ```bash python manage.py runserver 0.0.0.0:8001 ``` 这会使得Django应用程序监听所有网络接口上的`8001`端口。 #### 设置资源共享 (CORS) 为了让前端能够顺利请求到后端API,需要配置Django支持资源共享。可以在`settings.py`中加入以下设置以允许所有来源访问API[^4]: ```python CORS_ORIGIN_ALLOW_ALL = True ``` 此配置消除了浏览器中的同源策略限制,使任何网站或Web应用都能向Django发送HTTP请求。 #### 构建并部署前端代码 对于基于Vue.js构建的前端部分,每次修改完成后都需要重新编译静态文件至`dist`目录内。具体操作是在前端工程路径下调用NPM脚本来完成打包过程[^1]: ```bash npm run build ``` 生成后的静态资源会被放置于指定位置,默认情况下是`dist`文件夹;之后这些资源应当被复制或者链接到Django能识别的地方以便提供给客户端加载。 #### 运行完整的前后端分离架构 当上述准备工作都已完成以后: - **后端**:继续维持着由`runserver`指令开启的服务实例; - **前端**:通过本地或其他远程服务器托管已打包好的HTML/CSS/JavaScript等静态资产,并指向正确的API地址后端交互。 这样就实现了前后端完全解耦合的工作模式,各自独立运作的同时又能协同工作。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值