跨域CORS的设置

设置前后端域名

原因:

前后端分离时,用户进行页面访问是直接访问的前端服务器, 前端服务器完成所有页面的跳转。前端需要数据时,发送ajax请求,后端处理后,提供数据服务。

1.设置hosts文件

编辑/etc/hosts文件,可以设置本地域名

sudo vim /etc/hosts

在文件中增加两条信息

127.0.0.1   api.meiduo.site
127.0.0.1   www.meiduo.site
2.创建host.js文件,为前端保存后端域名

在前端front_end_pc/js目录中

var host = 'http://api.meiduo.site:8000';
3.修改settings配置

在ALLOWED_HOSTS,增加可以访问后端的域名

ALLOWED_HOSTS = ['api.meiduo.site', '127.0.0.1', 'localhost', 'www.meiduo.site']

为后端添加跨域CORS访问的支持

4.安装
pip install django-cors-headers
5.添加应用
INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)
6.中间件设置
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]
7.添加白名单
# CORS
CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8080',
    'localhost:8080',
    'www.meiduo.site:8080',
    'api.meiduo.site:8000'
)
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie
  • 凡是出现在白名单中的域名,都可以访问后端接口
  • CORS_ALLOW_CREDENTIALS 指明在跨域访问中,后端是否支持对cookie的操作。
### Django 中使用 `django-cors-headers` 版本 4.7.0 进行 CORS 设置 为了实现资源共享 (CORS),可以利用 `django-cors-headers` 库来简化配置过程。以下是详细的配置说明: #### 安装依赖库 首先需要安装 `django-cors-headers`,可以通过 pip 工具完成安装: ```bash pip install django-cors-headers==4.7.0 ``` #### 配置 settings.py 文件 在项目的 `settings.py` 文件中进行如下修改: 1. **添加应用到 INSTALLED_APPS** 将 `'corsheaders'` 添加到已有的应用程序列表中。 ```python INSTALLED_APPS = [ ... 'corsheaders', ... ] ``` 2. **调整中间件顺序** 确保 `'corsheaders.middleware.CorsMiddleware'` 出现在 `'django.middleware.common.CommonMiddleware'` 之前。 ```python MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ... ] ``` 3. **定义允许的源地址** 使用 `CORS_ALLOWED_ORIGINS` 来指定哪些名被允许访问资源[^1]。 ```python CORS_ALLOWED_ORIGINS = [ "http://www.s5.com:8000", ] ``` 如果希望开放所有来源,则可启用以下选项(注意生产环境的安全风险): ```python CORS_ALLOW_ALL_ORIGINS = True ``` 4. **其他可选参数** 可以进一步自定义行为,例如支持的方法、头部字段等: ```python CORS_ALLOW_METHODS = [ "DELETE", "GET", "OPTIONS", "PATCH", "POST", "PUT", ] CORS_ALLOW_HEADERS = [ "accept", "authorization", "content-type", "user-agent", "x-csrftoken", "x-requested-with", ] ``` #### URL 和视图函数中的处理 对于特定视图函数,可以直接通过响应对象设置头信息,如示例所示: ```python from django.http import JsonResponse, HttpResponse import json def new_users(request): user_list = ['lleo', 'tom', 'jack'] obj = HttpResponse(json.dumps(user_list)) obj["Access-Control-Allow-Origin"] = "http://www.s5.com:8000" return obj ``` 或者更推荐的方式是在全局范围内统一管理策略。 #### 测试功能 启动开发服务器并尝试从外部前端页面发起 AJAX 请求验证是否成功获取数据。 --- ### 示例代码总结 完整的项目结构可能涉及多个文件协同工作,下面是一个简单的例子展示如何集成上述组件。 **settings.py** ```python INSTALLED_APPS = [ ... 'corsheaders', ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ... ] CORS_ALLOWED_ORIGINS = ["http://www.s5.com:8000"] CORS_ALLOW_METHODS = ["GET", "POST", "OPTIONS"] CORS_ALLOW_HEADERS = ["Content-Type", "Authorization"] ``` **views.py** ```python from django.http import JsonResponse def write_stock_list(request): data = {"status": "success"} response = JsonResponse(data) return response ``` **urls.py** ```python from django.conf.urls import url from . import accessdata urlpatterns = [ url('write/', accessdata.write_stock_list), ] ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值