广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 后端开发 > Python >day 92 跨域和CORS
  • 371

0
分享到

day 92 跨域和CORS

dayCORS 2023-01-31 00:01:36 371人浏览 八月长安

Python 官方文档：入门教程 => 点击学习

摘要

      本节目录 一 跨域 二 CORS 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 跨域 　　 　　同源策略（Same origin policy）是一种约定，

 
 

 

本节目录

  • 一 跨域
  • 二 CORS
  • 三 xxx
  • 四 xxx
  • 五 xxx
  • 六 xxx
  • 七 xxx
  • 八 xxx

一 跨域

　　

　　同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说WEB是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。　　　　

　　同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持javascript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

　　简单请求跨域

　　我们创建两个Django项目，第一个叫做s1，一个叫做s2，s1用8000端口启动，s2用8001端口启动

　　s1项目的index.html文件内容如下：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2>s1的首页</h2>
<button id="btn">ajax请求</button>


<script src="https://cdn.bootCSS.com/Jquery/3.4.0/jquery.js"></script>
<script>
    $('#btn').click(function () {
        $.ajax({
            //url:'/books/', 访问自己服务器的路由，同源(ip地址、协议、端口都相同才是同源)
            url:'Http://127.0.0.1:8001/books/', //访问其他服务器的路由，不同源,那么你可以访问到另外一个服务器，但是浏览器将响应内容给拦截了，并给你不同源的错误：Access to XMLHttpRequest at 'http://127.0.0.1:8001/books/' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://127.0.0.1:8002' that is not equal to the supplied origin.
            #并且注意ip地址和端口后面是一个斜杠，如果s2的这个url没有^books的^符号，那么可以写两个//。
　　　　　　  type:'get',
            success:function (response) {
                console.log(response);
            }

        })
    })


</script>
</body>
</html>
复制代码

　　　　urls.py文件内容如下：

复制代码
from djanGo.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
    url(r'^books/', views.books),
]
复制代码

 　　　　views.py内容如下：

复制代码
from django.shortcuts import render,HttpResponse
from django.http import JSONResponse
# Create your views here.

def index(request):
    return render(request,'index.html')

def books(request):

    # return JsonResponse(['西游记','三国演义','水浒传'],safe=False)
    obj = JsonResponse(['西游记','三国演义','水浒传'],safe=False)
    return obj
复制代码

 

 　　s2项目的urls.py内容如下：

复制代码
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^books/', views.books),
]
复制代码

　　 　　views.py内容如下：

复制代码
from django.shortcuts import render
from django.http import JsonResponse
# Create your views here.
def books(request):

    # return JsonResponse(['西游记2','三国演义2','水浒传2'],safe=False)

    obj = JsonResponse(['西游记2','三国演义2','水浒传2'],safe=False)
    #下面这个响应头信息是告诉浏览器，不要拦着，我就给它，"*"的意思是谁来请求我，我都给
    # obj["Access-Control-Allow-Origin"] = "*"
    obj["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000" #只有这个ip和端口来的请求，我才给他数据，其他你浏览器帮我拦着
    return obj
复制代码

 

 　　以上是一个简单请求的跨域问题和解决方法。 

 

 

二 CORS

　　

　　CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

　　整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

　　因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

　　

　　浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

　　只要同时满足以下两大条件，就属于简单请求。

复制代码
（1) 请求方法是以下三种方法之一：（也就是说如果你的请求方法是什么put、delete等肯定是非简单请求）
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：（如果比这些请求头多，那么一定是非简单请求）
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-fORM-urlencoded、multipart/form-data、text/plain，也就是说，如果你发送的application/json格式的数据，那么肯定是非简单请求，Vue的axiOS默认的请求体信息格式是json的，ajax默认是urlencoded的。
复制代码

　　凡是不同时满足上面两个条件，就属于非简单请求。

　　我们改一下上一节的s1项目的index.html文件中的ajax里面的内容：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2>s1的首页</h2>
<button id="btn">Ajax请求</button>


<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script>
    $('#btn').click(function () {
        $.ajax({
            url:'http://127.0.0.1:8001/books/',
            type:'post',
            contentType:'application/json',//非简单请求，会报错：Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
            data:JSON.stringify({
               a:'1'
            }),
            //headers:{b:2},
            success:function (response) {
                console.log(response);
            }

        })
    })


</script>
</body>
</html>
复制代码

 　　

 

　　浏览器对这两种请求的处理，是不一样的。

复制代码
* 简单请求和非简单请求的区别？

   简单请求：一次请求
   非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。
* 关于“预检”

- 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
     => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers
复制代码

　　　　看图：

 　　　　

　　　　 

　　s2项目的views.py内容如下：

复制代码
from django.shortcuts import render
from django.http import JsonResponse
# Create your views here.
def books(request):

    # return JsonResponse(['西游记2','三国演义2','水浒传2'],safe=False)

    obj = JsonResponse(['西游记2','三国演义2','水浒传2'],safe=False)
    # obj["Access-Control-Allow-Origin"] = "*"
    obj["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000"
    print(request.method)
    #处理预检的options请求，这个预检的响应，我们需要在响应头里面加上下面的内容
    if request.method == 'OPTIONS':
        # obj['Access-Control-Allow-Headers'] = "Content-Type" #"Content-Type",首字母小写也行
        # obj['Access-Control-Allow-Headers'] = "content-type" #"Content-Type",首字母小写也行。这个content-type的意思是，什么样的请求体类型数据都可以，我们前面说了content-type等于application/json时，是复杂请求，复杂请求先进行预检，预检的响应中我们加上这个，就是告诉浏览器，不要拦截
        obj['Access-Control-Allow-Headers'] = "content-type,b"  #发送来的请求里面的请求头里面的内容可以定义多个，后端需要将头配置上才能访问
    return obj
复制代码

 

 

　　支持跨域，简单请求

　　　　服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 '*'

　　支持跨域，复杂请求

　　　　由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。

　　　　　　“预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method

　　　　　　“预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers

　　

　　关于请求方式的跨域问题及解决方法：

　　s1的index.html文件内容如下：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2>s1的首页</h2>
<button id="btn">Ajax请求</button>


<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script>
    $('#btn').click(function () {
        $.ajax({
            url:'http://127.0.0.1:8001/books/',
            //type:'delete',
            //type:'post',
            type:'put',
            contentType:'application/json',//非简单请求，会报错：Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
            data:JSON.stringify({
               a:'1'
            }),
            headers:{b:'2'},
            success:function (response) {
                console.log(response);
            }

        })
    })


</script>
</body>
</html>
复制代码

　　s2项目的views.py内容如下：

复制代码
from django.shortcuts import render
from django.http import JsonResponse
# Create your views here.
def books(request):

    # return JsonResponse(['西游记2','三国演义2','水浒传2'],safe=False)

    obj = JsonResponse(['西游记2','三国演义2','水浒传2'],safe=False)
    # obj["Access-Control-Allow-Origin"] = "*"
    obj["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000"
    print(request.method)
    #处理预检的options请求，这个预检的响应，我们需要在响应头里面加上下面的内容
    if request.method == 'OPTIONS':
       
        obj['Access-Control-Allow-Headers'] = "content-type,b"  #发送来的请求里面的请求头里面的内容可以定义多个，后端需要将头配置上才能访问
        obj['Access-Control-Allow-Methods'] = "DELETE,PUT"  #通过预检的请求方法设置

    return obj
复制代码

 

 

三 xxx

 

 

 

 

 

四 xxx

 

 

 

 

 

五 xxx

 

 

 

 

 

 

六 xxx

 

 

 

 

七 xxx

 

 

 

 

八 xxx

　　

 

 

 

您可能感兴趣的文档:
点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: day 92 跨域和CORS

本文链接: https://www.lsjlt.com/news/181983.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • day 92 跨域和CORS
          本节目录 一 跨域 二 CORS 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 跨域 　　 　　同源策略（Same origin policy）是一种约定，...
    99+
    2023-01-31
    day CORS
  • 详解Spring MVC CORS 跨域
    介绍跨域CORS，全称是"跨域资源共享"（Cross-origin resource sharing）当页面发出跨域请求时:简单请求(先简单理解为正常的get/post吧):浏览器将请求的地址添加到header的Origin里面发送请求。接...
    99+
    2023-05-31
    spring mvc cors
  • 解决Django cors跨域问题
    Django cors跨域问题 前后端分离项目中的跨域问题 即同源策略 同源策略：同源策略/SOP（Same origin policy）是一种约定，由 Netscape 公司 19...
    99+
    2022-11-12
  • Nodejs如何解决跨域(CORS)
    目录Nodejs解决跨域(CORS)手动配置CORS模块axiosNodejs CORS跨域问题总结Nodejs解决跨域(CORS) 前后端分离的大环境下，受制于同源策略，我们需要懂...
    99+
    2023-01-17
    Nodejs跨域 Nodejs解决跨域 Nodejs CORS
  • 分析CORS跨域资源共享
    本篇内容主要讲解“分析CORS跨域资源共享”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“分析CORS跨域资源共享”吧!了解下同源策略    ...
    99+
    2022-10-19
  • CORS跨域资源共享漏洞
    目录 漏洞介绍靶场漏洞复现修复方案参考文献 在 xray 被动扫描的时候无意间看到了 baseline/cors/reflected，因为是未接触过的东西 简单总结一下，虽然到了最后...
    99+
    2023-09-01
    web安全
  • 快速解决跨域请求问题:jsonp和CORS
    网上各种跨域教程，各种实践，各种问答，除了简单的 jsonp 以外，很多说 CORS 的都是行不通的，老是缺那么一两个关键的配置。本文只想解决问题，所有的代码经过亲自实践。本文解决跨域中的 get、post、data、cookie 等这些问...
    99+
    2023-05-30
    jsonp 跨域问题 cors跨域请求
  • jsonp和CORS跨域请求问题怎么解决
    这篇文章主要讲解了“jsonp和CORS跨域请求问题怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jsonp和CORS跨域请求问题怎么解决”吧！JSONPjsonp 的原理很简单，利...
    99+
    2023-06-02
  • Django cors跨域问题怎么解决
    这篇文章主要介绍“Django cors跨域问题怎么解决”，在日常操作中，相信很多人在Django cors跨域问题怎么解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Django&nb...
    99+
    2023-07-02
  • 简单易懂的JSONP和CORS跨域方案详解
    目录一、了解跨域何为跨域何为同源二、跨域解决方案JSONP（JSON with Padding）简单实现流程图封装优缺点CORS(Cross-Origin Resource Shar...
    99+
    2022-11-13
    JSONP CORS跨域方案 JSONP CORS
  • Nginx如何解决前端跨域问题以及CORS跨域配置
    Nginx如何解决前端跨域问题以及CORS跨域配置，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。Nginx的CORS配置，网上太多这配置了，但大家更多的复制粘贴...
    99+
    2023-06-04
  • Node.js中怎么设置CORS跨域请求
    这篇文章将为大家详细讲解有关Node.js中怎么设置CORS跨域请求，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。CORS说到CORS，相信前端儿都不陌生，...
    99+
    2022-10-19
  • 使用SpringCloudApiGateway之支持Cors跨域请求
    问题背景 公司的项目需要前后端分离，vue+java，这时候就需要支持Cors跨域请求了。最近对zuul进行升级，假如说zuul是1.0的话，api gateway就是2.0的网关，...
    99+
    2022-11-12
  • Springboot中怎么处理CORS跨域请求
    Springboot中怎么处理CORS跨域请求，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。　　一、什么是CROS　　CORS Header　　二、SpringBoot跨域请求...
    99+
    2023-06-02
  • Spring MVC 与 CORS跨域的详细介绍
    1. CORS 简介同源策略（same origin policy）是浏览器安全的基石。在同源策略的限制下，非同源的网站之间不能发送 ajax 请求的。为了解决这个问题，w3c 提出了跨源资源共享，即 CORS(Cross-Origin R...
    99+
    2023-05-31
    spring mvc cors
  • 如何使用SpringCloudApiGateway支持Cors跨域请求
    本篇内容介绍了“如何使用SpringCloudApiGateway支持Cors跨域请求”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！问题背景...
    99+
    2023-06-20
  • Angular如何通过CORS实现跨域方案
    这篇文章给大家介绍Angular如何通过CORS实现跨域方案，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。就拿iframe来说作为一个前端工程师,我极为讨厌iframe这种东西.它不光...
    99+
    2022-10-19
  • spring cloud gateway跨域全局CORS配置方式
    在Spring 5 Webflux中，配置CORS，可以通过自定义WebFilter实现： 注：此种写法需真实跨域访问，监控header中才会带相应属性。 代码实现方式 impo...
    99+
    2022-11-12
  • 跨域(CORS)问题的解决方案分享
    目录前后端分离项目，如何解决跨域问题什么是跨域问题跨域问题演示及解决点击前端登录按钮覆盖默认的CorsFilter来解决该问题重新运行代码，点击登录按钮设置SpringSecurit...
    99+
    2023-02-13
    cors跨域问题 CORS跨域解决方案 CORS解决跨域的几种实现方式
  • springboot解决CORS跨域的方式有哪些
    这篇文章主要介绍“springboot解决CORS跨域的方式有哪些”，在日常操作中，相信很多人在springboot解决CORS跨域的方式有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”springboo...
    99+
    2023-07-02
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作