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只能访问和操作自己域下的资源,不能访问和操作其他域下的资源. 在 ...
随机推荐
- mybatis的简单使用调用mapper接口
mybatis 是apache下的一个面向sql编程的半自动化的ORM持久层的框架.特点:面向sql编程,达到高性能的使用目的. 下面是简单使用 现导入jar包,只有mybatis和数据库驱动包(这里 ...
- java之try、catch、finally
结论:try和catch相当于程序分支,finally块中不会改变变量的指针(引用地址):和final修饰的变量类似. public class Test { public static AreaRQ ...
- JavaWeb——XML转义符字
被<![CDATA[]]>这个标记所包含的内容将表示为纯文本,比如<![CDATA[<]]>表示文本内容“<”. 此标记用于xml文档中,我们先来看看使用转义符的 ...
- PyQt5 入门
换了VSCODE开发,感觉比sublime好点,可能是由于第三版老弹框烦人吧.VSCODE看着也挺好看的. 学习 PyQt5 中文教程 0. 安装完之后错误 pip 安装了 pyqt5 from Py ...
- gentoo 工具命令
查看具体某个命令来源于哪个软件包,使用 equery,比如说查找 lsusb 来源于哪个包,可以用 equery belongs lsusb
- 导入数据库时报错1067 – Invalid default value for ‘字段名’
最近把mysql升级到5.7了,wordpress导数据报错 Invalid default value for 'comment_date' 原因出在类似这样的语句 DROP TABLE IF EX ...
- Hive 任务优化 tips
1. 集群任务队列: 一般有 root.default, root.online, root.offline, root.spark-thiftserver Hue提交的任务一般默认在 defau ...
- pyqt5.0 GraphicsView框架
场景(The Scene) QGraphicsScene提供图形视图场景.该场景具有以下职责: 提供用于管理大量图元的快速界面(锅) 将事件传播到每个图元(把螃蟹烧熟了) 管理图元状态,例如选择和焦点 ...
- delphi图片欣赏
作者QQ:276678295
- DOCKER解析（转）
Docker基本概念详解 本文只是对Docker的概念做了较为详细的介绍,并不涉及一些像Docker环境的安装以及Docker的一些常见操作和命令. 阅读本文大概需要15分钟,通过阅读本文你将知道一下 ...