由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取另一个源加载的文档的属性。

特别的:由于同源策略是浏览器的限制,所以请求的发送和响应是可以进行,只不过浏览器不接收罢了。

浏览器同源策略并不是对所有的请求均制约:

  • 制约:XmlHttpRequest
  • 不制约:img、iframe、script等具有src属性的标签

跨域,跨域名访问,如:http://www.c1.com域名向http://www.cw.com域名发送请求。

1. JSONP实现跨域请求

JSONP(JSONP-JSON with Padding是JSON的一种“使用模式”),是利用script标签的src属性(浏览器允许script标签跨域)。

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <p>
<input type="button" onclick="Jsonp1();" value='提交'/>
</p> <p>
<input type="button" onclick="Jsonp2();" value='提交'/>
</p> <script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function Jsonp1(){
var tag = document.createElement('script');
tag.src = "http://c2.com:8000/test/";
document.head.appendChild(tag);
document.head.removeChild(tag); } function Jsonp2(){
$.ajax({
url: "http://c2.com:8000/test/",
type: 'GET',
dataType: 'JSONP',
success: function(data, statusText, xmlHttpRequest){
console.log(data);
}
})
} </script>
</body>
</html> 基于JSONP实现跨域Ajax - Demo

基于JSONP实现跨域Ajax -Demo

2. CORS

随着技术的发展,现在的浏览器可以支持主动设置从而允许跨域请求,即:跨域资源共享(CORS,Cross-Origin Resource Sharing),其本质是设置响应头,使得浏览器允许跨域请求。

* 简单请求 OR 非简单请求

条件:
1、请求方式:HEAD、GET、POST
2、请求头信息:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type 对应的值是以下三个中的任意一个:
application/x-www-form-urlencoded
multipart/form-data
text/plain
注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求

* 简单请求和非简单请求的区别?

简单请求:一次请求。
非简单请求:两次请求,在发送数据之前会先发一次请求用于做“预检”, 只有“预检”通过后才再发送一次请求用于数据传输。

* 关于预检

— 请求方式:OPTIONS
— “预检”其实做检查,检查如果通过则允许传输数据,检查不通过则不再发送真正想要发送的“消息”
— 如何“预检”
—— 如果复杂请求是PUT等请求,则服务端需要设置允许某请求,否则“预检”不通过Access-Control-Request-Method
—— 如果复杂请求设置了请求头,则服务端需要设置允许某请求头,否则“预检”不通过Access-Control_Request-Headers

3. 在django中支持跨域,复杂请求

由于复杂请求时,首先会发送“预检”请求,如果“预检”成功则发送真实数据。

  • “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
  • “预检”请求时,允许请求头则需要服务器设置响应头:Access-Control-Request_Headers
  • “预检”缓存时间,服务器设置响应头:Access-Control-Max-Age

在django中设置中间件,可以解决跨域问题,具体做法如下:

第一步:在需要解决跨域的app中新建一个文件夹【middleware】,然后再新建一个python文件【cros.py】。

第二步:在py文件【cros.py】中,写入代码如下:

 from django.utils.deprecation import MiddlewareMixin

 class CORS(MiddlewareMixin):
def process_response(self, request, response):
response['Access-Control-Allow-Origin'] = "*"
response['Access-Control-Allow-Headers'] = "Content-Type"
response['Access-Control-Allow-Method'] = "PUT,DELETE"
return response

Django中间件解决跨域问题

第三步:将【cros.py】注册在【settings】中的【MIDDLEWARE】中

在django中解决跨域AJAX的更多相关文章

  1. django中解决跨域问题

    -跨域问题 -浏览器的:同源策略,浏览器拒绝不是当前域域返回的数据 -ip地址和端口号都相同才是同一个域 -如何解决: -CORS:跨域资源共享 -简单请求:发一次请求 -非简单请求:非简单请求是发送 ...

  2. DRF 中 解决跨域 与 预检

    DRF 中 解决跨域 与 预检 1 跨域 浏览器的同源策略: 对ajax请求进行阻拦 ps: 对href src属性 不限制 只有浏览器会阻止,requests模块不会存在跨域 (1)解决方案1 JS ...

  3. 跨域问题和django中实现跨域

    跨域问题 1.同源策略(浏览器的安全功能): 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同 2.CORS跨域资源共享 实现CORS通信的关键是服务器,只要服务器实 ...

  4. Python之Flask和Django框架解决跨域问题,配合附加ajax和fetch等js代码

    Flask框架py解决跨域问题示例: # -*- coding: utf- -*- # by zhenghai.zhang from flask import Flask, render_templa ...

  5. HTML5下通过response header解决跨域AJAX cookie的问题

    ajax: 通过给Response Header添加Access-Control-Allow-Origin:*  来解决跨域请求,*代表允许所有的跨域请求,或者把*换成指定的域名 cookie: 服务 ...

  6. vue中解决跨域问题

    方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Metho ...

  7. NODE中解决跨域请求的问题

    1.Node Express 解决请求跨域请求 标签(空格分隔): 跨域 1是Access-Control-Allow-Origin 允许的域 2是Access-Control-Allow-Heade ...

  8. 提示"No 'Access-Control-Allow-Origin' header"及Spring 中解决跨域问题

    问题描述 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://12 ...

  9. Django中的跨域请求问题

    本文目录 一 同源策略 二 CORS(跨域资源共享)简介 三 CORS基本流程 四 CORS两种请求详解 五 Django项目中支持CORS 回到目录 一 同源策略 同源策略(Same origin ...

随机推荐

  1. -bash: /usr/librxec/grepconf.sh:Nosuch file or directory

    最近修改/etc/profile文件时,不小心在后面添加了source /etc/profile,导致使用xshell登录远程linux的时候出现下面的信息, 一直无法进入linux,将profile ...

  2. ASP.NET Core 2.0 中读取 Request.Body 的正确姿势

    原文:ASP.NET Core 中读取 Request.Body 的正确姿势 ASP.NET Core 中的 Request.Body 虽然是一个 Stream ,但它是一个与众不同的 Stream ...

  3. WP8的新功能-通过一个程序来启动另一个程序

    Wp8对原来的WP7做了大量的优化...其中一个就包括Protocol Association,也就是通过uri来打开另外一个程序,这也就是说,我们可以做一个程序来启动另外一个程序了,如微信,QQ之类 ...

  4. Java实现发邮件功能---网易邮箱

    目录 Java实现发邮件功能 前言 开发环境 代码 效果 结束语 Java实现发邮件功能 前言 电子邮件的应用场景非常广泛,例如新用户加入,即时发送优惠清单.通过邮件找回密码.监听后台程序,出现异常自 ...

  5. Python应用范围seo

    Python有许多OOP概念,包括类.对象.数据和方法.抽象.封装.继承和多态性等原则也可以使用Python实现和表示.python有几个高级函数,包括迭代器.生成器.列表分析器.lambda表达式和 ...

  6. 从零开始使用mocha测试

    mocha 需要在node环境下跑,请确保已经安装了node   1.新建一个文件夹 test   2.命令行切换到test目录下,执行命令:npm init ,出现选择按enter,一系列选择完成之 ...

  7. Django 开发相关知识 整理

    前言 前端ajax HTTP请求头 ajax上传文件 jsonp跨域 URL 设计 分发 url参数编码 反向生成url 视图 request对象 POST url信息 视图返回值 HttpRespo ...

  8. Redis分布式缓存安装和使用

    独立缓存服务器: LinuxCentOS Redis版本: 3.0 下面我们针对于Redis安装做下详细的记录: 编译和安装所需的包: #yum install gcc tcl创建安装目录:贵州中医肝 ...

  9. Hadoop_27_MapReduce_运营商原始日志增强(自定义OutputFormat)

    1.需求: 现有一些原始日志需要做增强解析处理,流程: 1. 从原始日志文件中读取数据(日志文件:https://pan.baidu.com/s/12hbDvP7jMu9yE-oLZXvM_g) 2. ...

  10. 、M/C/U/简单加/密方法、

    ............................... 一.STM32Flash组织 STM32的Flash包括主存储器(HD版本,512KB)+信息块.信息块包括2KB的系统存储器(用于系统 ...