Django 跨域请求解决 axios 未完待续

最新推荐文章于 2024-11-08 13:43:44 发布

weixin_30627381

最新推荐文章于 2024-11-08 13:43:44 发布

阅读量127

点赞数

文章标签： python 人工智能 javascript ViewUI

原文链接：http://www.cnblogs.com/yanxiatingyu/p/9846531.html

版权

import django
import os
# os.environ.setdefault("DJANGO_SETTINGS_MODULE", "untitled5.settings")  # project_name 项目名称
# django.setup()
from django.utils.deprecation import MiddlewareMixin
import importlib

project_settings = os.environ['DJANGO_SETTINGS_MODULE']
# print(project_settings)#untitled5.settings

settings_ = importlib.import_module(project_settings)
# <module 'untitled5.settings' from 'C:\\Users\\Administrator\\Desktop\\机器学习\\untitled5\\untitled5\\settings.py'>

# print(settings_)
CORS = getattr(settings_, 'CORS')

class MyMiddle(MiddlewareMixin):
    def process_response(self, request, response):
        if request.method == 'OPTIONS':
            response['Access-Control-Allow-Headers'] = CORS['Access-Control-Allow-Headers']
            response['Access-Control-Allow-Methods'] = CORS['Access-Control-Allow-Methods']
            print("options")
        # if request.method == 'POST':
        #     response['Access-Control-Allow-Headers'] = CORS['Access-Control-Allow-Headers']
        #     response['Access-Control-Allow-Methods'] = CORS['Access-Control-Allow-Methods']
        #     print("post")

        response['Access-Control-Allow-Origin'] = CORS['Access-Control-Allow-Origin']

        return response

CORS = {
    'Access-Control-Allow-Headers': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Origin': '*'
}

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',
    'app01.myMiddle.MyMiddle'
]

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="app">
{{  test }}    

<button v-on:click="asy_post">post</button>
<button v-on:click="asy_get">get</button>
</div>



<script src="D://Vue//vue.js"></script>
<script src="D://Vue//axios.min.js"></script>

<script >
    
    new Vue({
        el:'#app',
        data(){
            return {
                test:'nihao你好',
                data:{"msg":"需要传递的数据"},
                url:'http://127.0.0.1:8000/index/',
            };
        },
        created(){
        
        },
        methods:{
            asy_get(){
                
                axios.get(this.url).then(function(response){
                    console.log('返回的数据');
                }).catch(function(error){
                    console.log(error);
                });
            },
            asy_post(){
                axios.defaults.headers.common['k1']='k1';
                axios.post(this.url,this.data)
                .then(function(response){
                    console.log(response);
                })
                .catch(function(error){
                    console.log(error);
                });

            },
        },


    })


</script>

</body>
</html>