CORS跨域请求之简单请求与非简单请求

简介: 先来看一个例子定义server01的项目,在路由表中添加一条路由记录url(r'^getData.html$',views.get_data)对应的视图函数 from django.shortcuts import render,HttpResponse def ge...

先来看一个例子

定义server01的项目,在路由表中添加一条路由记录

url(r'^getData.html$',views.get_data)

对应的视图函数

    from django.shortcuts import render,HttpResponse
    
    def get_data(request):
    
        response=HttpResponse("server----001")
        return response

定义server02项目,在路由表中添加一条路由记录

url(r'^index.html/',views.index),

对应的视图函数

    from django.shortcuts import render
    
    def index(request):
    
        return render(request,"index.html")
    

对应的index.html文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>server----002</h1>
    <script src="/static/jquery-3.2.1.js"></script>
    <script>
        $.ajax({
            url:'http://127.0.0.1:8000/getData.html',
            type:'GET',
            success:function(data){
                console.log(data);
            }
        })
    </script>
    </body>
    </html>

运行server01项目,使用8100端口打开server02的index.html网页,可以看到如下信息

img_789eb1ee3eef4dfe9048a619c1377bd3.png

发送这个请求使用的是GET方法.如果把server02的index.html网页中设定为使用PUT方法发送请求,会看到什么情况呢?

index.html中的请求方法修改为PUT,然后刷新浏览器

img_71b4527b29946c39217f16b657ce10a4.png

可以看到网页上显示的request method变成了OPTIONS,可是在网页中声明的请求方法是PUT

为什么会出现这样的情况呢???这就涉及到简单请求非简单请求了.

简单请求就是使用设定的请求方式请求数据
而非简单请求则是在使用设定的请求方式请求数据之前,先发送一个OPTIONS请求,看服务端是否允许客户端发送非简单请求.
    只有"预检"通过后才会再发送一次请求用于数据传输

简单请求与非简单请求的区别

* 请求方式:HEAD,GET,POST
* 请求头信息:
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type 对应的值是以下三个中的任意一个
                        application/x-www-form-urlencoded
                        multipart/form-data
                        text/plain

只有同时满足以上两个条件时,才是简单请求,否则为非简单请求

如果在上面的例子中,在server01中设定响应头,

    from django.shortcuts import render,HttpResponse
    
    def get_data(request):
        if request.method=="OPTIONS":
        
            response=HttpResponse()
            response['Access-Control-Allow-Origin']="*"
            response['Access-Control-Allow-Methods']="PUT"
            return response
        elif request.method =="PUT":
        
            response=HttpResponse("server----001")
            response['Access-Control-Allow-Origin']="*"
            return response

再次刷新http://127.0.0.1:8100/index.html/网页,可以看到

img_acdbcba4e47fb1eca580d7b8b70ee978.png

img_603a31402171b7fbf230b5710faca0bb.png

img_09958cf12aa68de1e4349bc64b8adccb.png

先发送的是OPTIONS请求,第二次发送的是PUT请求,而且获取到目标字符串.

由此得知,对于非简单请求,客户端以PUT方式请求数据,服务端的"预检"里边一定要包含允许客户端使用非简单方式请求数据的响应头

“预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
“预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers
“预检”缓存时间,服务器设置响应头:Access-Control-Max-Age

虽然可以通过设置响应头和响应方式等支持非简单请求,但是不到万不得已的情况,不能允许客户端发送非简单请求.

因为非简单请求会使服务器比简单请求的多一倍的压力.

目录
相关文章
|
6天前
|
开发框架 中间件 Java
如何处理跨域资源共享(CORS)的 OPTIONS 请求?
处理 CORS 的 OPTIONS 请求的关键是正确设置响应头,以告知浏览器是否允许跨域请求以及允许的具体条件。根据所使用的服务器端技术和框架,可以选择相应的方法来实现对 OPTIONS 请求的处理,从而确保跨域资源共享的正常进行。
|
6月前
|
移动开发 JSON 前端开发
跨域资源共享(CORS):详解跨域请求的限制与解决方法
跨域资源共享(CORS):详解跨域请求的限制与解决方法
|
3月前
|
JSON 小程序 API
【Azure API 管理】APIM CORS策略设置后,跨域请求成功和失败的Header对比实验
【Azure API 管理】APIM CORS策略设置后,跨域请求成功和失败的Header对比实验
|
JSON 前端开发 JavaScript
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(三)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(三)
|
6月前
|
JavaScript 安全 前端开发
js开发:请解释什么是跨域请求(CORS),以及如何解决跨域问题。
CORS是一种W3C标准,用于解决浏览器同源策略导致的跨域数据访问限制。它通过服务器在HTTP响应头添加标志允许特定源进行跨域请求。简单请求无需预检,而预检请求(OPTIONS)用于询问服务器是否接受非简单请求。服务器端配置响应头如`Access-Control-Allow-Origin`等实现CORS策略,客户端JavaScript则正常发起请求。若配置不当,浏览器将阻止跨域访问,保障安全。
84 2
|
缓存 JSON 前端开发
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(二)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(二)
|
XML 数据采集 Web App开发
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(一)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)
|
JSON 前端开发 安全
CORS跨域请求出现问题
1、问题描述 Access to XMLHttpRequest at ‘http://localhost:8080/user/register’ from origin ‘http://localhost:8002’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcar
|
JSON JavaScript 前端开发
如何处理跨域请求:JSONP、CORS 和代理服务器
处理跨域请求是前端开发中的常见挑战,因为浏览器的同源策略限制了在不同域名、协议或端口之间进行直接通信。为了解决跨域请求的问题,可以使用以下三种常见的方法:JSONP、CORS和代理服务器。
453 0
|
前端开发 Java
SpringBoot开发秘籍 - 处理跨域请求CORS
SpringBoot开发秘籍 - 处理跨域请求CORS
87 0