qhfl-1 跨域
CORS跨域请求
CORS即Cross Origin Resource Sharing 跨域资源共享，那么跨域请求还分为两种，一种叫简单请求，一种是复杂请求
简单请求
HTTP方法是下列方法之一
HEAD， GET，POST
HTTP头信息不超出以下几种字段
Accept， Accept-Language， Content-Language， Last-Event-ID
Content-Type只能是下列类型中的一个
application/x-www-from-urlencoded
multipart/form-data
text/plain
任何一个不满足上述要求的请求，即会被认为是复杂请求
复杂请求会先发出一个预请求，我们也叫预检，OPTIONS请求
浏览器的同源策略
跨域是因为浏览器的同源策略导致的，也就是说浏览器会阻止非同源的请求
非同源即域名不同，端口不同都属于非同源的
浏览器只阻止表单以及ajax请求，并不会阻止src请求，所以我们的cdn，图片等src请求都可以发
解决跨域
JSONP
jsonp的实现原理是根据浏览器不阻止src请求入手来实现的
from django.shortcuts import render
from django.http import HttpResponse
from rest_framework.views import APIView
from rest_framework.response import Response # Create your views here. class DemoView(APIView):
def get(self, request):
res = "handlerResponse('跨域测试')"
return HttpResponse(res) def put(self, request):
return Response("put接口测试") def post(self, request):
return Response("POST接口测试")
JsonP实现的后端代码
JsonP解决跨域只能发送get请求，并且实现起来需要前后端交互比较多。
JsonP解决跨域
jsonp 用 script 的方式去请求，只能通过get请求数据
<script>
function handlerResponse(data) {
console.log(data)
}
</script>
<script src="http://127.0.0.1:8000/demo/"></script>
添加响应头解决跨域
告诉浏览器不要拦截来解决跨域
中间件 middlewares.py
from django.utils.deprecation import MiddlewareMixin
class MyCors(MiddlewareMixin):
def process_response(self, request, response):
response["Access-Control-Allow-Origin"] = "*" # 任何跨域都不拦截
if request.method == "OPTIONS": # 预检，OPTIONS请求
response["Access-Control-Allow-Methods"] = "PUT, DELETE"
response["Access-Control-Allow-Headers"] = "content-type"
return response
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script>
function handlerResponse(data) {
console.log(data)
}
</script>
<script src="http://127.0.0.1:8000/demo/"></script>
</head>
<body>
<div id="app"> </div>
<script>
const app = new Vue({
el: "#app",
mounted(){
axios.request({
url: "http://127.0.0.1:8000/demo/",
method: "PUT",
data: {
"name": "Alex"
}
}).then(function (data) {
console.log(data)
})
}
})
</script> </body>
</html>
request.html
qhfl-1 跨域的更多相关文章
- Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
- Taurus.MVC 2.2 开源发布：WebAPI 功能增强（请求跨域及Json转换）
背景: 1:有用户反馈了关于跨域请求的问题. 2:有用户反馈了参数获取的问题. 3:JsonHelper的增强. 在综合上面的条件下,有了2.2版本的更新,也因此写了此文. 开源地址: https:/ ...
- ASP.NET Web API 跨域访问（CORS）
一.客户端用JSONP请求数据 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignatu ...
- 解决cookie跨域访问
一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入c ...
- 关于python的bottle框架跨域请求报错问题的处理
在用python的bottle框架开发时,前端使用ajax跨域访问时,js代码老是进入不了success,而是进入了error,而返回的状态却是200.url直接在浏览器访问也是正常的,浏览器按F12 ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- 跨域问题，前端主动向后台发送cookie
跨域是什么? 从一个域名的网页访问另一个域名的资源,就会出现跨域.只要协议.端口.域名有一个不同就会出现跨域 例如: 1.协议不同 http://www.baidu.com:80 和 https:/ ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- 浅谈跨域以及WebService对跨域的支持
跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源. 在 ...
随机推荐
- 安装grid时找不到ASM共享磁盘
1.安装ORACLE数据库集群软件grid时找不到共享磁盘,如下图: 2.网上找过有各种说法,但此处小编的解决方案是:通过重新安装软件:oracleasmlib-2.0.4-1.el6.x86_64. ...
- crontab自动失效注意事项
若用户密码过期,用户的crontab计划任务会自动失效.重设用户密码修改时间后,crontab会自动恢复. #使用chage -l 查看用户密码过期时间 chage -l user #使用chage ...
- pyqt---------事件与信号处理
pyqt:信号与槽的关系 GUI应用程序是事件驱动的. 事件主要由应用程序的用户生成. 但它们也可以通过其他手段产生,例如:网络连接,窗口管理器或定时器. 当我们调用应用程序的exec_()方法时,应 ...
- 解决no module named ipykernel_launcher
解决no module named ipykernel_launcher 最近开hydrogen的时候,提示no module named ipykernel_launcher. 记得以前解决过这个问 ...
- java.lang.String (JDK1.8)
String类实现了java.io.Serializable, Comparable<String>, CharSequence这三个interface. 看了下这三个interface中 ...
- aio,nio ,io 心得
1.nio 流的过程有几个,连接,可读,读 ,返回 :连接了不一定可读,等待浪费时间,这些时间可以去读其他的连接,selector是管理,管理全部测一下可不可读,只对可读的连接进行读取.同时,nio有 ...
- github 访问速度太慢
151.101.112.249 http://global-ssl.fastly.Net 192.30.253.112 http://github.com 在hosts文件添加 另 pip里的pyec ...
- Python设计模式 - 创建型 - 单例模式(Singleton) - 十种
对于很多开发人员来说,单例模式算是比较简单常用.也是最早接触的设计模式了,仔细研究起来单例模式似乎又不像看起来那么简单.我们知道单例模式适用于提供全局唯一访问点,频繁需要创建及销毁对象等场合,的确方便 ...
- Cobbler安装CentOS7系统时报错 line 286： No space left on device
原因分析: 此报错并不是说磁盘空间不足,而是内存太小了. CentOS7安装系统时最小要2G以上内存,而当时我只给了1G. 所有报错,把内存加大到2G后可以正常安装系统.
- 11. Container With Most Water (JAVA)
Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). ...