cors的跨域问题解决

简单请求

cors解决跨域问题方法: 解决方法是在客户端给服务端发送请求时,加上一个响应头.

简单请求:也就是一次请求,没有第二次请求,

客户端代码:

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.IndexView.as_view()),
]

url

from django.shortcuts import render
from rest_framework import views
from django.http import JsonResponse


class IndexView(views.APIView):

    def get(self,request,*args,**kwargs):
        ret={
            'code':1000,
            'data':'老男孩'
        }
        res=JsonResponse(ret)
        res['Access-Control-Allow-Origin']='http://127.0.0.1:8001'  #只允许这一个域名跨域
        res['Access-Control-Allow-Origin']='*'          #允许所有的域名跨域
        #最好的办法是加一个中间件
        return res

views

服务端

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^in/', views.index),
]

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

views

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<input type="button" value="按钮" class="c1">

<script>
    $('.c1').click(function () {
        $.ajax({
            url:'http://127.0.0.1:8000/index/',  #给别的网站发送请求
            type:'GET',
            success:function (data) {
                console.log(data)
            }

        })
    })
</script>

templates

复杂请求

复杂请求:也就是在发送请求之前,会先发送一个预检Options请求,如果预检通过,则再次发送真实的数据

缺点:会造成资源浪费,影响向效率.

所以发送真实的数据之前,自己定义一个options函数.

客户端:

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.IndexView.as_view()),
]

url

from django.shortcuts import render,HttpResponse
from rest_framework import views
from django.http import JsonResponse


class IndexView(views.APIView):

    def get(self,request,*args,**kwargs):
        ret={
            'code':1000,
            'data':'老男孩'
        }
        res=JsonResponse(ret)
        res['Access-Control-Allow-Origin']='http://127.0.0.1:8001'  #只允许这一个域名跨域
        res['Access-Control-Allow-Origin']='*'          #允许所有的域名跨域
        #最好的办法是加一个中间件
        return res


    def post(self,request,*args,**kwargs):
        ret = {
            'code': 1000,
            'data': '老男孩'
        }
        res = JsonResponse(ret)
        res['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8001'  # 只允许这一个域名跨域
        res['Access-Control-Allow-Origin'] = '*'  # 允许所有的域名跨域
        # 最好的办法是加一个中间件
        return res

    def options(self, request, *args, **kwargs):
        #tornado操作
        # self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
        # self.set_header('Access-Control-Allow-Headers', "k1,k2")
        # self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
        # self.set_header('Access-Control-Max-Age', 10)
        
        #django操作
        res=HttpResponse()
        res['Access-Control-Allow-Origin']='*'
        res['Access-Control-Allow-Headers']='h1'
        # 如果是复杂的操作,如put,delete请求
        # res['Access-Control-Allow-Methods']='PUT'
        #设置超时时间
        # res['ccess-Control-Max-Age']=10
        return res

Views

服务端:

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^in/', views.index),
]

url

from django.shortcuts import render

# Create your views here.

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

views

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<input type="button" value="按钮" class="c1">

<script>
    $('.c1').click(function () {
        $.ajax({
            url:'http://127.0.0.1:8000/index/',
            type:'POST',
            data:{'k1':'v1'},
            headers:{'h1':'h2'},  #复杂请求
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>

</body>
</html>

templates

PS:如果要传输cookie时,也要在options中加上相应的键值对.详情点击