解决跨域的两种办法 / 网络研习社#22

在前一节中分享了前后端设计的理念和方法。这个方法遇到的第一个问题就是跨域的问题。访问的端口不同，域名不同都会跨域。所以，只要是前后端分离就会遇到这个问题，当然，这也是服务器的一些防范机制。在服务器端解决跨域有两个办法，一个自己写，一个是用现成的。

一、创建cors.py解决跨域

class MiddlewareMixin(object):
    def __init__(self, get_response=None):
        self.get_response = get_response
        super(MiddlewareMixin, self).__init__()

    def __call__(self, request):
        response = None
        if hasattr(self, 'process_request'):
            response = self.process_request(request)
        if not response:
            response = self.get_response(request)
        if hasattr(self, 'process_response'):
            response = self.process_response(request, response)
        return response

class CORSMiddleware(MiddlewareMixin):
    def process_response(self,request,response):
        # 添加响应头
        # 允许你的域名来获取我的数据
        response['Access-Control-Allow-Origin'] = "*"
        # 允许你携带Content-Type请求头
        response['Access-Control-Allow-Headers'] = "Content-Type"
        # 允许你发送DELETE,PUT
        response['Access-Control-Allow-Methods'] = "DELETE,PUT,GET,POST"
        if request.method == "OPTIONS":
            response['Access-Control-Allow-Headers'] = "Content-Type"
            response['Access-Control-Allow-Methods'] = "PUT,DELETE"
        return response

在settings.py中添加中间件
MIDDLEWARE = [    
    'app01.cors.CORSMiddleware',  // 要放在最上面    ...
]

二、用django-cors-headers来解决跨域

django-cors-headers ，分四步：

1. pip install django-cors-headers
#settings.py
2. INSTALLED_APPS = (
    ...
    'corsheaders',
    )
3. MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    
    'corsheaders.middleware.CorsMiddleware',
    ...
    ]
4. CORS_ORIGIN_ALLOW_ALL = True

---

网络研习社系列文章：

• 微信小程序开发初体验 / 网络研习社#1
• 新技能：小程序空间当图床！ / 网络研习社#2
• 小程序云开发中数据的传递形式 / 网络研习社#3
• 如何突破coreldraw的网络限制 / 网络研习社#4
• 我师网小程序初发布，大家多多指教 / 网络研习社#5
• 用github 做文件目录 / 网络研习社#6
• LNMP环境一键安装（一） / 网络研习社#7
• LNMP环境自定义安装（二） / 网络研习社#8
• 利用github做免费博客 / 网络研习社#9
• Nodejs，打开服务器黑匣子 / 网络研习社#10
• 一入前端深似海，聊聊vue.js / 网络研习社#11
• 我们想做的，vue都帮我们做好了 / 网络研习社#12
• vue和小程序一家亲 / 网络研习社#13
• vue的组件面面观 / 网络研习社#14
• vue-router路由的参数和设计 / 网络研习社#15
• webpack前端神器 / 网络研习社#16
• 用FileZilla作FTP文件服务器 / 网络研习社#17
• 连接FTP文件服务器的方法/ 网络研习社#18
• axios请求HTTP和vuex数据管理 / 网络研习社#19
• YouTube 视频下载利器—Youtube-DLG / 网络研习社#20
• Vue和django rest framework做前后端分离设计 / 网络研习社#21

---

@lemooljiang #network-institute