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只能访问和操作自己域下的资源,不能访问和操作其他域下的资源. 在 ...

随机推荐

使用Oracle DBLink进行数据库之间对象的访问操作
Oracle中自带了DBLink功能,它的作用是将多个oracle数据库逻辑上看成一个数据库,也就是说在一个数据库中可以操作另一个数据库中的对象,例如我们新建了一个数据database1,我们需要操作 ...
Java IO浅析
1.File类 /** * * @author lenovo * * File类 * pathSeparator * separator * * File() * boolean createNewF ...
Oracle 唯一约束（unique constraint）与索引（index）关系说明
一. 官网对Unique Constraints说明 http://download.oracle.com/docs/cd/E11882_01/server.112/e16508/datainte.h ...
自动配置pom文件，构建maven项目jar包依赖关系，找到jar包运用到jmeter
首先说下pom文件特别方便的优点: 什么是pom文件? POM(Project Object Model) 是Maven的基础. 它是一个XML文件,包含了Maven用来build项目所需要的项目配置 ...
python3：实现字符串的全排列（有重复字符）
抛出问题求任意一个字符串的全排列组合,例如a='123',输出 123,132,213,231,312,321. 解决方案 #字符串任意两个位置字符交换 def str_replace(str, x ...
android 开发更好的数据存放，回调，处理class模式，适合与各种布局适配器class一起使用
预先导入数据模式: /** * Created by lenovo on 2018/5/18. */ public class DeivceListData { private DeivceListD ...
git中提交了想要忽略的文件，如何在删除
我们在用git的时候,有时会不小心将不需要文件跟踪的文件(如.classpath文件.project等)提交到git的服务器,这时候要忽略这些文件的做法是: 1.修改.gitignore文件按照规则 ...
centos下安装djangobb
曾经在freenas虚拟环境下安装过djangobb,因为要安装的依赖文件太多,最后没有安装成功. 今晚在centos6.9 下,先创建了虚拟环境,然后照着官方网站的快速安装指南,安装后也运行不了,后 ...
通过DMS连接RDS需要添加的DMS白名单地址
10.152.163.0/24,139.224.4.0/24,11.193.54.0/24,101.37.74.0/24,10.137.42.0/24,121.43.18.0/24
java.lang.String (JDK1.8)
String类实现了java.io.Serializable, Comparable<String>, CharSequence这三个interface. 看了下这三个interface中 ...