跨域资源共享(CORS)
同源策略
同源策略是浏览器的一个安全策略,只允许当前页面或当前域下发送请求,如果向其他域发送请求,会被浏览器拦截
同源的意思:协议、IP地址、端口三者一致,浏览器才会认为是同一个域,三者中有一个不一致就是不同域
实例:比如说我们要通过127.0.0.1:8001/test/中的一个点击事件,提交一个ajax请求,要去拿127.0.0.1:8010/test2/的返回数据,这时候就会遇到一个问题——跨域资源共享的问题,程序的报错信息如下:
Access to XMLHttpRequest at 'http://127.0.0.1:8010/test2/' from origin 'http://127.0.0.1:8001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
# CORS策略已阻止从源站“http://127.0.0.1:8001”访问位于“http://127.0.0.1:8010/test2/”的xmlhttpRequest:请求的资源上不存在“访问控制允许源站”头

views.py(该程序运行的网址为http://127.0.0.1:8010/test2)
from django.shortcuts import render, HttpResponse
def test2(request):
return HttpResponse('这是另一个网站地址')

在127.0.0.1:8001/test/中通过ajax向127.0.0.1:8010/test2/发送GET请求,其实数据已经被拿回来了,报错的原因就是返回的数据被浏览器拦截了,这就是跨域问题的本质。那如何解决这个问题,最简单的处理方法就是在被ajax请求访问的视图函数返回的时候让它带上一个参数:response['Access-Control-Allow-Origin'] ='http://127.0.0.1:8001'
将8010端口运行的views.py做如下修改
def test2(request):
response = HttpResponse('这是另一个网站地址')
# 只允许一个域
response['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8001'
# 允许所有的域
# response['Access-Control-Allow-Origin'] = '*'
return response
这时候再去通过ajax访问127.0.0.1:8010/test2/网站就不会报错了!执行效果如下:

其实,CORS有两种请求方式,以上处理的这只是简单请求
简单请求与非简单请求
简单请求必须满足的条件
# 1、请求方法是以下一种:
GET
POST
HEAD
# 2、http的头信息不超出以下几种:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:application/x-www-form-urlencoded、multipart/form-data、text/plain # 只限于这三个值
除了以上的所有出现的信息都是非简单请求!
那针对不同的请求会有不同的解决方法,所谓的简单请求就是只发送一次请求,而非简单请求是发送两次请求,在发送数据之前会先发一次请求用于做“预检(OPTIONS)”,只有“预检”通过后才再发送一次请求用于数据传输
预检
请求方式:OPTIONS
“预检”其实是做检查,检查如果通过则允许传输数据,检查不通过则不再发送真正想要发送的消息
如何“预检”
如果复杂请求是PUT等请求,则服务端需要设置允许某请求,否则“预检”不通过
Access-Control-Request-Method
如果复杂请求设置了请求头,则服务端需要设置允许某请求头,否则“预检”不通过
Access-Control-Request-Headers
简单请求支持跨域
服务器设置响应头:Access-Control-Allow-Origin = '域名' 或 '*'
非简单请求支持跨域
由于复杂请求时,首先会发送“预检”请求,如果“预检”成功,则发送真实数据。
- “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
- “预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers
在Django中解决CORS问题
可以通过上述方法在返回的结果中添加允许信息来解决简单请求,还可以在Django的中间件中处理简单请求和非简单请求
from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
def process_response(self,request,response):
# 非简单请求
if request.method=="OPTIONS":
#可以加*
response["Access-Control-Allow-Headers"]="Content-Type"
response["Access-Control-Allow-Origin"] = "允许访问的URL"
return response
跨域资源共享(CORS)的更多相关文章
- 跨域资源共享(CORS)问题解决方案
CORS:Cross-Origin Resource Sharing(跨域资源共享) CORS被浏览器支持的版本情况如下:Chrome 3+.IE 8+.Firefox 3.5+.Opera 12+. ...
- 跨域资源共享CORS与JSONP
同源策略限制: 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果没有同源策略,攻击者可以通过JavaScript获取你的邮件以及其他敏感信息,比如说 ...
- 跨域解决方案 - 跨域资源共享cors
目录 1. cors 介绍 2. 原理 3. cors 解决跨域 4. 自定义HTTP 头部字段解决跨域 5. 代码演示 5. 参考链接 1. cors 介绍 cors 说的是一个机制,其实相当于一个 ...
- VUE SpringCloud 跨域资源共享 CORS 详解
VUE SpringCloud 跨域资源共享 CORS 详解 作者: 张艳涛 日期: 2020年7月28日 本篇文章主要参考:阮一峰的网络日志 » 首页 » 档案 --跨域资源共享 CORS 详解 ...
- 网络编程-跨域资源共享 CORS
目录 1.什么是同源策略? 2.跨域资源共享 CORS 3.预检请求 4.CORS相关字段 5.Golang实现跨域 6.参考资料 1.什么是同源策略? 如果两个 URL 的 protocol.por ...
- 跨域资源共享 CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...
- 跨域资源共享 CORS 详解
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...
- 使Web Api 支持跨域资源共享(CORS)
Reference:http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api Imp ...
- 跨域资源共享CORS详解
简介 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请 ...
- 跨域资源共享 CORS 详解(转)
add by zhj: 公司在一个web产品上,做前后端分离,前后端提供独立的服务,使用不同的域名,通过http进行交互,在 前端,会涉及到跨域访问的问题,前端使用了CORS,后端同时需要做相应修改, ...
随机推荐
- 使用nio遍历文件夹
1.递归方式: private static void print(File f){ if(f!=null){ if(f.isDirectory()){ File[] fileArray=f.list ...
- Monte Carlo Method(蒙特·卡罗方法)
0-故事: 蒙特卡罗方法是计算模拟的基础,其名字来源于世界著名的赌城——摩纳哥的蒙特卡罗. 蒙特卡罗一词来源于意大利语,是为了纪念王子摩纳哥查理三世.蒙特卡罗(MonteCarlo)虽然是个赌城,但很 ...
- Linux 系统从入门到精通的学习大纲;
以前没有接触过Linux,生产环境需要,有时候遇到问题,百度一下,问题解决了,在遇到问题,在百度,有时候问题是如何解决的,为什么会解决有点丈二的和尚摸不着头脑, 为此,想用一段时间,系统的学习下Lin ...
- windows系统下升级nodejs
别整那些有的没得,直接Win+R 输入:npm config ls 找到nodejs安装路径 然后上nodejs官网,下载最新安装程序,指定旧版本目录,直接安装覆盖掉 啥用n模块啥得,不适合俺们微软体 ...
- MongoDB配置简明文档
1.下载MongoDB程序包(RHEL 7 Linux 64-bit x64) [root@mongodb /]# wget -P/usr/local/src/ https://fastdl.mong ...
- anacodna/python 安装 tensorflow
study from : https://www.cnblogs.com/HongjianChen/p/8385547.html 执行1-6 7 安装jupyter 每次使用tensorflow,都要 ...
- NPOI 图片在单元格等比缩放且居中显示
NPOI导出的图片默认是在单元格左上方,这使得图片在单元格显示得很难看.居中,且等比缩放,才是图片在单元格上的完美展示. /// <summary> /// 图片在单元格等比缩放居中显示 ...
- 深度学习中优化【Normalization】
深度学习中优化操作: dropout l1, l2正则化 momentum normalization 1.为什么Normalization? 深度神经网络模型的训练为什么会很困难?其中一个重 ...
- Node.js目录
[相关学习] npm入门教程 [基础] (1) 初识Node.js (2) 开发环境和调试工具 (3) commonJs 规范 (4) node 概念(global.process进程.调试) (5) ...
- webpack打包懒加载
lazyload https://webpack.js.org/guides/lazy-loading/ 懒加载 -- 按需加载. Lazy, or "on demand", lo ...