2. 程式人生 > >在 Django2.0 中完美解決跨域請求的問題

在 Django2.0 中完美解決跨域請求的問題

阿新 • • 發佈：2019-01-26

一、前言

Django 1.x 版本修改一些配置的名稱，如：

版本 settings.py 中介軟體名稱
2.x MIDDLEWARE
1.x MIDDLEWARE_CLASSES

設定跨域請求的時候要注意

域名，協議，埠不同。瀏覽器執行javascript指令碼時，不會被執行。

二、操作


操作前
這裡寫圖片描述

1.安裝 django-cors-headers 
django-cors-headers

2.修改 setting.py

INSTALLED_APPS = [
    ...
    'corsheaders'
 
，
    ...
 ] 

# 新增中介軟體
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',# 預設
    'django.contrib.sessions.middleware.SessionMiddleware', # 預設

    'corsheaders.middleware.CorsMiddleware',# 預設
    # 注意順序，即在上一個的下面
    'django.middleware.common.CommonMiddleware', # 新增 ✔

    'django.middleware.csrf.CsrfViewMiddleware'
 
,# 預設
    'django.contrib.auth.middleware.AuthenticationMiddleware',# 預設
    'django.contrib.messages.middleware.MessageMiddleware', # 預設
    'django.middleware.clickjacking.XFrameOptionsMiddleware',# 預設
    'django.middleware.common.CommonMiddleware',# 預設
]

# 跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    '*'
 

)
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)
#部署到雲服務上必備
ALLOWED_HOSTS = ['*']

操作後
這裡寫圖片描述

三、其他

本例 ajax 請求示例程式碼

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        function upd() {
            $.ajax({
                type: "GET",
                data: "a=1",
                url: "http://127.0.0.1:8000/books/?format=json",
                success: function(result) {
                    console.log(result);
                    //alert(result)
                }
            });
        }
    </script>
    <body>
        <!--獲取-->
        <button id="btn2" onclick="upd()">Get request 獲取</button>
    </body>

</html>

四、參考文章

相關推薦

在 Django2.0 中完美解決跨域請求的問題

一、前言 Django 1.x 版本修改一些配置的名稱，如： 版本 settings.py 中介軟體名稱 2.x MIDDLEWARE 1.x MIDDLEW

Ajax 調用webservice 解決跨域請求和發布到服務器後本地調用成功外網失敗的問題

.org webmethod names -h com strong helper 解決 requested webservice 代碼 1 /// <summary> 2 /// MESService 的摘要說明 3

Java Web應用中支持跨域請求

通過 sca info def gist time 並且 tomcat json 轉載：https://blog.csdn.net/lmy86263/article/details/51724221 由於工程合作開發的需要，後臺的應用要能支持跨域訪問，但是在這個跨域

django中配置允許跨域請求

apps ons token middle red href clas cors nbsp 對於django 安裝django-cors-headers，詳情請看官方文檔 pip install django-cors-headers 　　 配置settings.py

解決跨域請求的問題

在上一篇中，我們遇到了跨域請求的問題，但是我們在跨域載入jquery.min.js的時候確實可以的 <script type="text/javascript" src="http://linfeng.taotao.com/js/jquery-easyui-1.4.1/jquery.m

利用Access-Control-Allow-Origin響應頭解決跨域請求原理

 傳統的跨域請求沒有好的解決方案，無非就是jsonp和iframe，隨著跨域請求的應用越來越多，W3C提供了跨域請求的標準方案（Cross-Origin Resource Sharing）。IE8、Firefox 3.5 及其以後的版本、Chrome瀏覽器、Safari 4 等已經實現了

Java 解決跨域請求

不多說，直接上程式碼。   被呼叫方自適應呼叫方請求域 該方法只需要修改被呼叫方的後臺程式碼，呼叫方可依照正常的ajax訪問資料 無序列表我們以spring-boot框架為例子，首先，在後臺建立一個跨域處理過濾器，程式碼如下

easy-springboot-web-cors | 配置cors解決跨域請求問題

全域性配置 @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public v

在前後端分離的專案中，ajax跨域請求怎樣附帶cookie

在專案的實際開發中，我們總會遇到前後端分離的專案，在這樣的專案中，跨域是第一個要解決的問題，除此之外，儲存使用者資訊也是很重要的，然而，在後臺儲存使用者資訊通常使用的session和cookie結合的方法，而在前端的實際情況中，跨域產生的ajax是無法攜帶cookie資訊的，

vue-cli中代理解決跨域

http-proxy-middleware 用於把請求代理轉發到其他伺服器的中介軟體。解決開發過程中的跨域問題 簡介 例如：我們當前主機為：http://localhost:3000/，後臺介面資料所在伺服器為：http://api.xxx.com。 如何在本

基於angular-cli配置代理解決跨域請求問題

1.跨域請求產生 隨著不同終端(Pad/Mobile/PC)的興起，對開發人員的要求越來越高，純瀏覽器端的響應式已經不能滿足使用者體驗的高要求，我們往往需要針對不同的終端開發定製的版本。為了提升開發效率，前後端分離的需求越來越被重視，後端負責業務/資料介面，前端負責展現/互動邏輯，

Spring完美解決跨域問題

一、Spring MVC 從4.2版本開始增加了對CORS的支援在Spring MVC 中增加CORS支援非常簡單,可以配置全域性的規則<mvc:cors> <mvc:mapping path="/**" allowed-origins="*

vue.js如何解決跨域請求問題

在vue專案中，前端與後臺進行資料請求或者提交時，如果後臺沒有設定跨域，那麼前端本地除錯程式碼的時候就會報錯 使用http-proxy-middleware 代理解決（注意：專案使用vue-cli腳手架搭建） 例如請求的介面為：'http://172.16.2.212:1

在 SpringBoot 中設定允許跨域請求

一、前言 現在在團隊做的專案都是前後端分離的，藉助 swagger 進行前後端合作 ① 後臺負責寫資料處理的介面 ② 前臺負責解析 JSON、設計介面 要實現介面可以給前端訪問，還要設定允許跨域訪問介面，正式本文的重點 前後端分離優缺點：

get解決跨域請求問題，jsonp結合ajax

什麼是跨域？ 跨域，指的是瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制。 所謂同源是指，域名，協議，埠均相同，不明白沒關係，舉個栗子： 請注意：localhost和127.0

XMLHttpRequest.withCredentials 解決跨域請求頭無Cookie的問題

XMLHttpRequest.withCredentials  屬性是一個Boolean型別，它指示了是否該使用類似cookies,authorization headers(頭部授權)或者TLS客戶端證書這一類資格證書來建立一個跨站點訪問控制（cross-site Acce

Flask 解決跨域請求情況下PUT及DELETE請求變成OPTIONS請求的問題

可以在後端響應頭上加上Allow-origin解決跨域問題，但是PUT和DELETE請求會變成OPTIONS請求，這時候如果後端不做處理的話，瀏覽器是不會再發送後續請求的 如下： // 前端程式碼 $('.todos').on('click', '.cell

Spring MVC 完美解決跨域問題

在方法添加註解 @CrossOrigin @CrossOrigin @ResponseBody @RequestMapping(value = "/findAllByPid",method = RequestMethod.POST) public JSONObject f

vue中axios解決跨域問題和攔截器使用

vue中axios不支援vue.use()方式宣告使用。 所以有兩種方法可以解決這點： 第一種： 在main.js中引入axios，然後將其設定為vue原型鏈上的屬性，這樣在元件中就可以直接 this.axios使用了 import axios fro

利用Access-Control-Allow-Origin響應頭解決跨域請求

         傳統的跨域請求沒有好的解決方案，無非就是jsonp和iframe，隨著跨域請求的應用越來越多，W3C提供了跨域請求的標準方案（Cross-Origin Resource Sharing）。IE8、Firefox 3.5 及其以後的版本、Chrome瀏覽