扫码关注官方微信

扫码下载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://lsjlt.com/news/181983.html(转载时请注明来源链接)

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

猜你喜欢
  • 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+
    2024-04-02
  • Nodejs如何解决跨域(CORS)
    目录Nodejs解决跨域(CORS)手动配置CORS模块axiosNodejs CORS跨域问题总结Nodejs解决跨域(CORS) 前后端分离的大环境下，受制于同源策略，我们需要懂...
    99+
    2023-01-17
    Nodejs跨域 Nodejs解决跨域 Nodejs CORS
  • 分析CORS跨域资源共享
    本篇内容主要讲解“分析CORS跨域资源共享”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“分析CORS跨域资源共享”吧!了解下同源策略    ...
    99+
    2024-04-02
  • 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
  • VUE Axios与跨域资源共享（CORS）：跨域请求的秘诀
    ...
    99+
    2024-04-02
  • Nginx如何解决前端跨域问题以及CORS跨域配置
    Nginx如何解决前端跨域问题以及CORS跨域配置，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。Nginx的CORS配置，网上太多这配置了，但大家更多的复制粘贴...
    99+
    2023-06-04
  • 使用SpringCloudApiGateway之支持Cors跨域请求
    问题背景 公司的项目需要前后端分离，vue+java，这时候就需要支持Cors跨域请求了。最近对zuul进行升级，假如说zuul是1.0的话，api gateway就是2.0的网关，...
    99+
    2024-04-02
  • Node.js中怎么设置CORS跨域请求
    这篇文章将为大家详细讲解有关Node.js中怎么设置CORS跨域请求，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。CORS说到CORS，相信前端儿都不陌生，...
    99+
    2024-04-02
  • Spring MVC 与 CORS跨域的详细介绍
    1. CORS 简介同源策略（same origin policy）是浏览器安全的基石。在同源策略的限制下，非同源的网站之间不能发送 ajax 请求的。为了解决这个问题，w3c 提出了跨源资源共享，即 CORS(Cross-Origin R...
    99+
    2023-05-31
    spring mvc cors
  • Springboot中怎么处理CORS跨域请求
    Springboot中怎么处理CORS跨域请求，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。　　一、什么是CROS　　CORS Header　　二、SpringBoot跨域请求...
    99+
    2023-06-02
  • 如何解决Spring boot 和Vue开发中CORS跨域问题
    这篇文章主要介绍如何解决Spring boot 和Vue开发中CORS跨域问题，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1. 遇到的问题：我用spring-boot 做Rest服...
    99+
    2024-04-02
  • Angular如何通过CORS实现跨域方案
    这篇文章给大家介绍Angular如何通过CORS实现跨域方案，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。就拿iframe来说作为一个前端工程师,我极为讨厌iframe这种东西.它不光...
    99+
    2024-04-02
  • spring cloud gateway跨域全局CORS配置方式
    在Spring 5 Webflux中，配置CORS，可以通过自定义WebFilter实现： 注：此种写法需真实跨域访问，监控header中才会带相应属性。 代码实现方式 impo...
    99+
    2024-04-02
  • 如何使用SpringCloudApiGateway支持Cors跨域请求
    本篇内容介绍了“如何使用SpringCloudApiGateway支持Cors跨域请求”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！问题背景...
    99+
    2023-06-20
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作