本文详细探讨了如何在Django框架中实现跨域资源共享(CORS)，涵盖了设置与配置方法，帮助开发者解决不同域名之间的数据交互问题。
### Django 实现跨域请求详解
#### 前言
本段落将详细介绍如何在Django框架中实现跨域资源共享（CORS），这是一种网络浏览器实施的安全策略，用于控制网页脚本与不同来源的资源进行交互。
#### 简单请求与复杂请求
**简单请求**必须满足以下条件：
1. HTTP方法为HEAD、GET或POST。
2. 请求头仅包含Accept, Accept-Language, Content-Language和Last-Event-ID等字段。
3. 如果存在Content-Type，则其值只能是application/x-www-form-urlencoded，multipart/form-data或text/plain。
不符合以上任意一条的请求将被视为**复杂请求**。对于复杂请求，浏览器会在实际请求前发送一个预检请求（Preflight Request），该请求采用OPTIONS方法，用来确定服务端是否允许特定的跨域请求。
#### 浏览器同源策略
同源策略是浏览器为了保护用户隐私而实施的一种安全机制。当两个页面不属于同一个来源时，其中一个页面不能访问另一个页面的数据或DOM树。来源通常由协议、域名和端口号组成，只要这三个要素中有一个不同，则认为是非同源。
值得注意的是，浏览器只阻止表单提交和Ajax请求的跨域，并不限制`img`、`script`等元素加载请求的跨域行为。
#### JsonP实现跨域
**JsonP**(JSON with Padding)是一种常用的跨域解决方案。其原理是利用浏览器允许非同源资源通过src属性进行加载的特点，前端定义一个回调函数并将其作为参数传递给服务器端，服务器将数据包裹在这个回调函数中返回给前端执行。
示例代码如下：
**视图文件：**
```python
from django.http import HttpResponse
def test_view(request):
return HttpResponse(handlerResponse(isok))
```
**HTML文件：**
```html
JsonP跨站请求测试<title>
</head>
<body>
<script type=text/javascript>
function handlerResponse(data) {
alert(data);
}
</script>
<!-- 必须放在被执行函数的script标签下面，否则会报错 -->
<script src=http://127.0.0.1:8000/test></script>
</body>
</html>
```
使用JsonP可以实现简单的GET请求跨域，但这种方法现已较少被采用，因为它只能支持GET请求，并且前后端交互较为繁琐。
#### 在Django中间件中添加响应头
在Django中，可以通过编写自定义的中间件来处理跨域问题，既适用于简单请求也适用于复杂请求。
**第一步：创建中间件**
```python
from django.utils.deprecation import MiddlewareMixin
class MyCors(MiddlewareMixin):
def process_response(self, request, response):
# 允许所有简单请求的跨域访问
response[Access-Control-Allow-Origin] = *
if request.method == OPTIONS:
# 判断是否为复杂请求
response[Access-Control-Allow-Headers] = Content-Type
response[Access-Control-Allow-Methods] = PUT, PATCH, DELETE
return response
```
**第二步：注册中间件**
在项目的`settings.py`文件中，将自定义的中间件添加到`MIDDLEWARE`列表。
**第三步：编写视图**
```python
from django.http import HttpResponse
def test_view(request):
if request.method == GET:
return HttpResponse(这是GET请求的数据)
elif request.method == POST:
return HttpResponse(这是POST请求的数据)
elif request.method == PUT:
return HttpResponse(这是PUT请求的数据)
```
**第四步：测试跨域**
创建一个简单的HTML文件，尝试发送各种类型（如GET、POST、PUT）的请求以验证跨域功能是否正常。
#### 总结
本段落介绍了Django实现跨域请求的方法，包括了简单和复杂请求的概念、JsonP的基本原理及其局限性，并且说明了如何通过自定义中间件在Django项目中实现跨域支持。通过以上步骤，开发者可以在实际开发过程中有效解决跨域问题，提高工作效率。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>Vue</span> <span style=color: #f73131>跨</span><span style=color: #f73131>域</span>配<span style=color: #f73131>置</span>的<span style=color: #f73131>解</span>决办法"
href="https://d.itadn.com/i0_67899481056/B/474443" target="_blank"><span style=color: #f73131>Vue</span> <span style=color: #f73131>跨</span><span style=color: #f73131>域</span>配<span style=color: #f73131>置</span>的<span style=color: #f73131>解</span>决办法</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
本文详细介绍了如何在Vue项目中解决跨域问题的各种方法和技巧，帮助开发者顺利实现前后端分离开发。
在使用 Vue 开发过程中经常会遇到跨域问题，在 Vue CLI 中有一个设置跨域请求的文件可以进行配置。
当出现无法跨域访问的情况时，可以在项目下的 `config` 文件夹中的 `index.js` 文件中修改 `dev: {}` 部分。具体如下：
```javascript
dev: {
env: require(./dev.env),
port: 8080,
autoOpenBrowser: false,
assetsSubDirectory: static,
assetsPublicPath: /,
proxyTable: {
/api: {
target: http://api.douban.com/v2, // 将target设置为我们需要访问的域名
changeOrigin: true,
pathRewrite: { ^/api: }
}
},
cssSourceMap: false
}
```
然后在 `main.js` 中添加全局属性：
```javascript
Vue.prototype.HOST = /api
```
至此，就可以在整个项目中使用这个域名了。例如：
```javascript
var url = this.HOST + /movie/in_theaters;
this.$http.get(url).then(res => {
this.movieList = res.data.subjects;
},res => {
console.info(调用失败);
});
```
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>Vue</span><span style=color: #f73131>跨</span><span style=color: #f73131>域</span>请求<span style=color: #f73131>解</span>决方法<span style=color: #f73131>详</span><span style=color: #f73131>解</span>"
href="https://d.itadn.com/i0_65452692159/B/710496" target="_blank"><span style=color: #f73131>Vue</span><span style=color: #f73131>跨</span><span style=color: #f73131>域</span>请求<span style=color: #f73131>解</span>决方法<span style=color: #f73131>详</span><span style=color: #f73131>解</span></a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
本文章详细探讨了在使用Vue.js框架时遇到的跨域问题，并提供了多种有效的解决方案。
一、我们需要请求的URL接口地址是http://iwenwiki.com/api/blueberrypai/getBlueBerryJamInfo.php，并且在查看页面响应信息时遇到了跨域问题。
二、解决上述跨域问题的方法是在项目的根目录中创建或修改vue.config.js文件，添加以下配置：
```javascript
module.exports = {
devServer: {
proxy: {
// 解决跨域请求
/api: {
target: http://iwenwiki.com,
ws: true,
changeOrigin: true,
pathRewrite: { ^/api: }
}
}
}
}
```
这样配置后，开发服务器将自动代理所有以`/api`开头的请求到目标URL。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>Vue</span><span style=color: #f73131>环</span><span style=color: #f73131>境</span>搭建<span style=color: #f73131>与</span>安装<span style=color: #f73131>详</span><span style=color: #f73131>解</span>"
href="https://d.itadn.com/i0_57417410285/B/730286" target="_blank"><span style=color: #f73131>Vue</span><span style=color: #f73131>环</span><span style=color: #f73131>境</span>搭建<span style=color: #f73131>与</span>安装<span style=color: #f73131>详</span><span style=color: #f73131>解</span></a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
本教程详细讲解了如何在不同操作系统上快速且正确地搭建和配置Vue开发环境，适合初学者学习。
VUE环境安装问题处理，包括在安装过程中可能遇到的各种情况及解决方法。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="Python venv虚拟<span style=color: #f73131>环</span><span style=color: #f73131>境</span><span style=color: #f73131>设</span><span style=color: #f73131>置</span><span style=color: #f73131>详</span><span style=color: #f73131>解</span>"
href="https://d.itadn.com/i0_80481009314/B/760067" target="_blank">Python venv虚拟<span style=color: #f73131>环</span><span style=color: #f73131>境</span><span style=color: #f73131>设</span><span style=color: #f73131>置</span><span style=color: #f73131>详</span><span style=color: #f73131>解</span></a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
本教程深入讲解了如何在Python中使用venv模块创建和管理独立的虚拟环境，帮助开发者轻松地隔离项目依赖。
一、创建虚拟环境
可以通过执行命令 `python -m venv env` 来创建一个名为 `env` 的虚拟环境。运行该命令后会生成一个包含项目专用 Python 解释器的文件夹，即 `env` 文件夹。
注意：在 Ubuntu 系统中，默认安装的 Python3 版本可能不包括 `venv` 模块，需要手动执行以下命令进行安装：
```
sudo apt install python3-venv
```
使用 VSCode 打开 `env` 目录后可以看到其结构。
二、使用虚拟环境
在 Windows 系统中，“激活” 虚拟环境的命令为 `.\\Scripts\\activate`。执行该命令后，可以在命令提示符前看到已添加了虚拟环境的名字 (env)。
对于 Ubuntu 用户来说，请参考相应的激活方法来启动 `env` 文件夹中的 Python 解释器。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="Anaconda、VSCode<span style=color: #f73131>与</span>PyTorch<span style=color: #f73131>环</span><span style=color: #f73131>境</span>配<span style=color: #f73131>置</span><span style=color: #f73131>详</span><span style=color: #f73131>解</span>"
href="https://d.itadn.com/i0_96930152122/B/79937" target="_blank">Anaconda、VSCode<span style=color: #f73131>与</span>PyTorch<span style=color: #f73131>环</span><span style=color: #f73131>境</span>配<span style=color: #f73131>置</span><span style=color: #f73131>详</span><span style=color: #f73131>解</span></a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
本篇文章详细介绍了如何在Anaconda环境下利用VSCode集成开发环境安装和配置PyTorch的方法，适合Python开发者参考学习。
本段落详细介绍了使用Anaconda、VSCode和Pytorch搭建开发环境的过程，并通过实例代码进行了深入讲解，具有较高的参考价值，适合学习或工作中参考借鉴。
</div><!---->
</div>
</li>
</body>
</html>
5星
