django中的跨域问题以及解决策略


from django.http import JsonResponse
 
 
def test(request):
    obj = JsonResponse({'name': 'darker', 'age': '18'})
    # 值针对简单请求
    obj['Access-Control-Allow-Origin'] = '*'    # 允许所有IP访问
    return obj

2, 原 django项目： apps/user/urls.py


from django.urls import path
from user import views
 
urlpatterns = [
    path('test/', views.test),
]

3. django项目中注释掉dev.py中的CSRF

4, 再创建一个django项目（用另一个端口）

template中创建index。html


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script>
head>
<body>
<button id="btn">点我button>
 
body>
<script>
    $('#btn').click(function () {
        $.ajax({
            url: 'http://127.0.0.1:8000/user/test/',
            method: 'get',
            success: function (data) {
                console.log(data)
            }
        })
    })
script>
html>

views.py


from django.shortcuts import render
 
 
def index(request):
    return render(request, 'index.html')

urls.py


from django.urls import path
from app01 import views
 
urlpatterns = [
    path('test/', views.index),
]

非简单请求

原django项目 app/user/view.py


from django.http import JsonResponse
 
 
def test(request):
    obj = JsonResponse({'name': 'Darker', 'age': '18'})
    if request.method == 'OPTIONS':
        obj['Access-Control-Allow-Headers'] = 'Content-Type,authorization'  # 或者填写 *
    obj['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8002'    # 8002端口是当前项目的
    return obj

新django项目中 template/index.html


"en">
    "UTF-8">
    Title

3，中间件处理

① 在原Django项目的根路径创建mymiddle.py - 自定义中间件


from django.utils.deprecation import MiddlewareMixin
 
 
class CoreMiddle(MiddlewareMixin):
    def process_response(self, request, response):
        if request.method == 'OPTIONS':
            response['Access-Control-Allow-Headers'] = 'Content-Type, authorization'    # 如果是 * 就代表全部IP都可以访问
        response['Access-Control-Allow-Origin'] = '*'
        return response

② 在原Django项目的dev.py的中间件中添加自定义中间件


MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'mymiddle.CoreMiddle',    # 这一句
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

③ 原Django项目apps/user/views中替换成如下代码


from django.http import JsonResponse
 
 
def test(request):
    return JsonResponse({'name': 'Darker', 'age': '18'})

解决跨域问题（第三方）

后端配置

① 后端安装跨域模块

pip install django-cors-headers

2，到dev.py中注册


INSTALLED_APPS = (
    ...
    'corsheaders'
)

3 到dev.py中添加中间件


MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',    # 这个是原本就存在的
    ...
]

④ 到dev.py中添加如下代码


CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
# CORS_ORIGIN_WHITELIST = (
#     'http://127.0.0.1:8080',
# )
CORS_ALLOWED_ORIGINS_REGEXES=[
    r'^http://.*?$',
]
# CORS_ORIGIN_REGEXES_WHITELIST = (
#         r'^http://.*?$',
# )
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',
    'Pragma',
)

设置dev.py的ALLOWED_HOSTS

ALLOWED_HOSTS = ['*']

后端测试

（测试 - 后台）到apps/user/views中替换成如下代码


from django.http import JsonResponse
 
 
def test(request):
    return JsonResponse({'name': 'Darker', 'age': '18'})

（测试 - 后台）到apps/user/urls中替换成如下代码


from django.urls import path
from user import views
 
urlpatterns = [
    path('test/', views.test),
]

启动项目

python manage.py runserver 127.0.0.1:8000

访问测试

前端测试

（测试 - 前台）App.vue 中换成如下代码


<template>
  <div id="app">
    <router-view/>
    {{name}}
  div>
template>
 
<script>
export default {
  data () {
    return {
      name: []
    }
  },
  mounted () {
    this.$axios.get(this.$settings.base_url + '/user/test/').then(res => {
      this.name = res.data
    })
  }
}
script>

启动项目

npm run serve

解决跨域问题（前端）

前端App.vue


<template>
  <div id="home">
    <h1>我是主页h1>
    <h2>{{info}}h2>
  div>
template>
 
<script>
export default {
  name: 'Home',
  data () {
    return {
      info: []
    }
  },
  mounted () {
    this.$axios.get('/moreClassicList?sortId=1&showType=3').then(res => {
      console.log(res.data)
    })
  }
}
script>
 
<style scoped>
 
style>

前端项目根路径 vue.config.js


const webpack = require("webpack");
 
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        "window.$": "jquery",
        Popper: ["popper.js", "default"]
      })
    ]
  },
  devServer: {
    proxy: {
      '/ajax': {
        target: 'https://m.maoyan.com/',
        changeOrigin: true
      },
      '/user': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true
      }
    }
  }
};

wsgi，uWSGI，uwsgi

https://www.liuqingzheng.top/article/1/05-CGI,FastCGI,WSGI,uWSGI,uwsgi%E4%B8%80%E6%96%87%E6%90%9E%E6%87%82/

相关阅读:
java 多线程面试题及答案
 spring boot 分布式session实现
 vue3 配置生产和开发非vite
mac安装hive 2.3.9
MySQL学习笔记
 DBCO-PEG-Ciprofloxacin 二苯并环辛炔-聚乙二醇-环丙沙星 DBCO-PEG-环丙沙星
 1024程序员节日：庆祝代码世界的创造者与守护者
 【ARC与MRC的相互兼容 Objective-C语言】
基于streamlit的成绩展示平台
 AI编程新手快速体验SpringCloud Alibaba 集成AI功能
原文地址：https://blog.csdn.net/weixin_67531112/article/details/127734848