zoukankan      html  css  js  c++  java
  • restful 跨域

    同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能.

    就浏览器而言的, http://127.0.0.1:8000  协议 域名 端口

    跨域 问题//
    
    简单请求跨域    S1项目      127.0.0.1:8000
    from django.shortcuts import render
    from django.http import JsonResponse
    
    def test(request):
        return render(request,'index.html')
    
    def books(request):
        l1 = ['方法','炼钢','铁男']
        return JsonResponse(l1,safe=False)  # 非字典模式
    -------------------------------------------
    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),
        url(r'^test/', views.test),
    ]
    --------------------------------------
    #  python 脚本  tests.py  运行不受影响
    import requests
    import json
    a= requests.get('http://127.0.0.1:8001/books/')
    print(json.loads(a.content))
    -- 页面代码 --
    <
    body> <button id="sub"> ajax请求数据</button> </body> <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> <script> $("#sub1").click(function () { $.ajax({ // url:'/books/', 访问自己的就是同源 url: ' http://127.0.0.1:8001/books/', //访问其他服务器的路由就是非同源 type: 'get', success: function (response) { console.log(response); } }) }) </script>
    
    
    -- S2 项目  127.0.0.1:8001
    -- views.py -- 
    from django.shortcuts import render
    from django.http import  JsonResponse
    def books(request):
        ll = ['基金','故事','大厦']
        ret = JsonResponse(ll,safe=False)
        ret['Access-Control-Allow-Origin']  = '*' # 响应头  *是所有的地址  协议域名端口
        
    
        return  ret  # 非字典
    
    -------------------------------------
    -- 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),
    ]

    简单请求 

    (1)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 -- 页面改变
    <body>
    <button id="sub"> ajax请求数据</button>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    
    <script>
        $("#sub").click(function () {
            $.ajax({
    
                // url:'/books/',
                url: ' http://127.0.0.1:8001/books/',
               // type: 'post',
                type: 'put',
                headers:{a:1},
                contentType:'application/json',
                data:JSON.stringify(({'name':'chao'})),
                success: function (response) {
                    console.log(response);
    
                }
    
            })
        })
    </script>

    S2项目 views.py改变

    from django.shortcuts import render
    from django.http import  JsonResponse
    
    def books(request):
        ll = ['基金','故事','大厦']
        ret = JsonResponse(ll,safe=False)
        ret['Access-Control-Allow-Origin']  = '*' # 响应头  *是所有的地址  协议域名端口
        ret['Access-Control-Allow-Headers'] = '*'  #'content-type,a'
        ret['Access-Control-Allow-Methods'] = '*'   #'PUT'
    
        return  ret  # 非字典
     支持跨域,简单请求
    
        服务器设置响应头:Access-Control-Allow-Origin = '域名''*'
    
      支持跨域,复杂请求
    
        由于复杂请求时,首先会发送“预检”请求,如果“预检”成功,则发送真实数据。
    
          “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
    
          “预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers
  • 相关阅读:
    课程开始的第一次作业
    第四次寒假作业——实现五种语言的选择
    关于改良报告与学习总结(Ⅰ)
    Vue路由守卫之路由独享守卫
    Vue路由守卫之组件内路由守卫
    Vue中如何插入m3u8格式视频,3分钟学会!
    Vue中如何使用less
    第一章 初识爬虫
    【JQuery】注册中实现图片预览
    【Python】多种方式实现生成验证码
  • 原文地址:https://www.cnblogs.com/zhangchen-sx/p/10759294.html
Copyright © 2011-2022 走看看