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请求入手来实现的

  1. from django.shortcuts import render
  2. from django.http import HttpResponse
  3. from rest_framework.views import APIView
  4. from rest_framework.response import Response
  5.  
  6. # Create your views here.
  7.  
  8. class DemoView(APIView):
  9.     def get(self, request):
  10.         res = "handlerResponse('跨域测试')"
  11.         return HttpResponse(res)
  12.  
  13.     def put(self, request):
  14.         return Response("put接口测试")
  15.  
  16.     def post(self, request):
  17.         return Response("POST接口测试")

JsonP实现的后端代码

JsonP解决跨域只能发送get请求，并且实现起来需要前后端交互比较多。

JsonP解决跨域

jsonp 用 script 的方式去请求，只能通过get请求数据

  1.  <script>
  2.         function handlerResponse(data) {
  3.             console.log(data)
  4.         }
  5.  </script>
  6.  <script src="http://127.0.0.1:8000/demo/"></script>

添加响应头解决跨域

告诉浏览器不要拦截来解决跨域

中间件 middlewares.py

  1. from django.utils.deprecation import MiddlewareMixin
  2.  
  3. class MyCors(MiddlewareMixin):
  4.  
  5.     def process_response(self, request, response):
  6.         response["Access-Control-Allow-Origin"] = "*" # 任何跨域都不拦截
  7.         if request.method == "OPTIONS":  # 预检，OPTIONS请求
  8.             response["Access-Control-Allow-Methods"] = "PUT, DELETE"
  9.             response["Access-Control-Allow-Headers"] = "content-type"
  10.         return response
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <title>Title</title>
  9.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10.     <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
  11.     <script>
  12.         function handlerResponse(data) {
  13.             console.log(data)
  14.         }
  15.     </script>
  16.     <script src="http://127.0.0.1:8000/demo/"></script>
  17. </head>
  18. <body>
  19. <div id="app">
  20.  
  21. </div>
  22. <script>
  23.     const app = new Vue({
  24.         el: "#app",
  25.         mounted(){
  26.             axios.request({
  27.                 url: "http://127.0.0.1:8000/demo/",
  28.                 method: "PUT",
  29.                 data: {
  30.                     "name": "Alex"
  31.                 }
  32.             }).then(function (data) {
  33.                 console.log(data)
  34.             })
  35.         }
  36.     })
  37. </script>
  38.  
  39. </body>
  40. </html>

request.html

qhfl-1 跨域的更多相关文章

  1. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  2. Taurus.MVC 2.2 开源发布：WebAPI 功能增强（请求跨域及Json转换）

    背景: 1:有用户反馈了关于跨域请求的问题. 2:有用户反馈了参数获取的问题. 3:JsonHelper的增强. 在综合上面的条件下,有了2.2版本的更新,也因此写了此文. 开源地址: https:/ ...

  3. ASP.NET Web API 跨域访问（CORS）

    一.客户端用JSONP请求数据 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignatu ...

  4. 解决cookie跨域访问

    一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入c ...

  5. 关于python的bottle框架跨域请求报错问题的处理

    在用python的bottle框架开发时,前端使用ajax跨域访问时,js代码老是进入不了success,而是进入了error,而返回的状态却是200.url直接在浏览器访问也是正常的,浏览器按F12 ...

  6. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  7. 跨域问题，前端主动向后台发送cookie

    跨域是什么? 从一个域名的网页访问另一个域名的资源,就会出现跨域.只要协议.端口.域名有一个不同就会出现跨域 例如: 1.协议不同  http://www.baidu.com:80 和 https:/ ...

  8. Vue.js——基于$.ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...

  9. HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  10. 浅谈跨域以及WebService对跨域的支持

    跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源. 在 ...

随机推荐

  1. 什么是BOM?,什么是DOM? BOM跟DOM之间的关系

    什么是BOM? BOM是browser object model的缩写,简称浏览器对象模型.是用来获取或设置浏览器的属性.行为,例如:新建窗口.获取屏幕分辨率.浏览器版本号等. 比如 alert(); ...

  2. python3之time、datetime、random

    UTC:协调世界时,又称世界统一时间.世界标准时间.国际协调时间.由于英文(CUT)和法文(TUC)的缩写不同,作为妥协,简称UTC. 中国属于东八区,领先世界时间8小时 time模块 time.ti ...

  3. Dubbo源码分析

    Dubbo源码分析1 Dubbo源码分析2 dubbo源码阅读:rpc请求处理流程(1) 架构设计:系统间通信(17)——服务治理与Dubbo 中篇(分析) 13. Dubbo原理解析-注册中心之Zo ...

  4. 《深入浅出 Java Concurrency》目录

    最近在学习J.U.C,看到一个大神 关于这个系列写的非常精辟,由于想做笔记,故系列转载并记录之. 原文:http://www.blogjava.net/xylz/archive/2010/07/08/ ...

  5. nginx gunicorn 部署flask，带参数链接不可用的现象（笔记）

    微信小程序后台,开启 gunicorn之后屏幕会输出打印结果,一旦关闭shell 带参数链接不可用,只有开启shell才能使用, 一针见血 : 注释掉所有print语句,关闭shell 带参数的链接  ...

  6. MaC 修改MySQL密码

    1.苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server) 2.进入终端输入:cd /usr/local/mysql/bin ...

  7. Jquery中addClass方法不起作用的解决方案

    selected类是要在点击后添加上去的新样式,在点击后,发现没有变化,打开开发者工具,发现selected类已经添加成功了. 在这里没有显示成功的主要原因是后添加的样式表优先级更低,我暂时不清楚具体 ...

  8. leetcode581

    public class Solution { public int FindUnsortedSubarray(int[] nums) { , end = -, min = nums[n - ], m ...

  9. sublime3支持es6语法和vue彩色显示

    支持ES6语法设置: 首先安装nodejs 当然你可以使用其它诸如jsc之类的环境来运行js, 本文使用的是nodejs. 首先确保你的电脑已经安装好nodejs, 并已将其添加到环境变量中 (一般安 ...

  10. 【原】The Linux Command Line - Processes

    ps - report a snapshot of current processes top - display tasks job - list active jobs bg - place a ...