cors的跨域問題解決

時間 2019-11-30

標籤 cors 問題解決简体版

原文原文鏈接

簡單請求

cors解決跨域問題方法: 解決方法是在客戶端給服務端發送請求時,加上一個響應頭.html

簡單請求:也就是一次請求,沒有第二次請求,jquery

客戶端代碼:ajax

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

服務端django

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請求,若是預檢經過,則再次發送真實的數據跨域

缺點:會形成資源浪費,影響向效率.cookie

因此發送真實的數據以前,本身定義一個options函數.app

客戶端:cors

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

服務端:ide

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中加上相應的鍵值對.詳情點擊函數

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。