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

随机推荐

html/css/js-layer弹出层的初次使用
学习前端有时很多时候要用到弹出层,原生的js写有些麻烦,而且不美观,基于jQuery的弹出层组件layer应运而生,近些年来备受青睐.官网上有使用教程,但当初用的时候还是糊里糊涂,今天来记录一下lay ...
codeblock用法
1.链接动态库.so和静态库.a settings->compiler->linker settings->add 2.编译报错ld return 1 exit status 一般来 ...
分布式 +rides
redis分布式部署 1.scrapy框架是否可以自己实现分布式? - 不可以.原因有二. 其一:因为多台机器上部署的scrapy会各自拥有各自的调度器,这样就使得多台机器无法分配start_urls ...
代码： !AJAX
http://www.cnblogs.com/cwp-bg/p/7668840.html ajax和jsonp使用总结 2017-10-17 var requestUrl="http://l ...
63.1拓展之纯 CSS 创作一个摇摇晃晃的 loader
效果地址:https://scrimba.com/c/cqKv4VCR HTML code: <div class="loader"> <span>Load ...
tomcat JRE_HOME
tomcat 不知道什么时候开始需要 JRE_HOME了: D:\java\apache-tomcat-7.0.68\bin>startup.batJAVA_HOME == D:\Progra ...
mybatis sql参考
参考mybatis sql: <select id="xxx" resultType="com.xxxx.xxx.vo.xx.xx" parameterT ...
STL里的内存池实现
这个貌似有点复杂,解决的主要问题就是减少内存分配次数,减少用户态核心态切换中断次数,提高运行速度,预分配和线程池一个道理,预分配 ////////////////////自由链表 union ...
ArcGIS自定义工具箱-字段值部分替换
ArcGIS自定义工具箱-字段值部分替换联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:替换某个字段中的字符串用例:湖南省长沙市=>湖南/长沙:临湘县 ...
web.xml hello1代码分析
在“Web页”节点下,展开WEB-INF节点,然后双击web.xml文件进行查看. 上下文参数提供Web应用程序所需的配置信息.应用程序可以定义自己的上下文参数.此外,JavaServer Faces ...