![vue rest.jpg](https://cdn.steemitimages.com/DQmcMHHPMyBXAF7bjKBnkgyR9ZBafndMKUjYRneidq7bawe/vue%20rest.jpg)

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

## 一、创建cors.py解决跨域
```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](https://github.com/ottoyiu/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]( https://steemit.com/cn/@lemooljiang/61qx8h-1)
* [新技能：小程序空间当图床！ / 网络研习社#2](https://steemit.com/cn/@lemooljiang/gjekw-2)
* [小程序云开发中数据的传递形式 / 网络研习社#3](https://steemit.com/cn/@lemooljiang/6a8ukt-3)
* [如何突破coreldraw的网络限制 / 网络研习社#4](https://steemit.com/cn/@lemooljiang/coreldraw-4)
* [我师网小程序初发布，大家多多指教 / 网络研习社#5](https://steemit.com/cn/@lemooljiang/6rr2ug-5)
* [用github 做文件目录 / 网络研习社#6](https://steemit.com/cn/@lemooljiang/github-6)
* [LNMP环境一键安装（一） / 网络研习社#7](https://steemit.com/cn/@lemooljiang/lnmp-7)
* [LNMP环境自定义安装（二） / 网络研习社#8](https://steemit.com/cn/@lemooljiang/lnmp-8)
* [利用github做免费博客 / 网络研习社#9](https://steemit.com/cn/@lemooljiang/github-9)
* [Nodejs，打开服务器黑匣子 / 网络研习社#10](https://steemit.com/cn/@lemooljiang/nodejs-10)
* [一入前端深似海，聊聊vue.js / 网络研习社#11]( https://steemit.com/cn/@lemooljiang/vue-js-11)
* [我们想做的，vue都帮我们做好了 / 网络研习社#12]( https://steemit.com/cn/@lemooljiang/vue-11)
* [vue和小程序一家亲 / 网络研习社#13]( https://steemit.com/cn/@lemooljiang/vue-13)
* [vue的组件面面观 / 网络研习社#14]( https://steemit.com/cn/@lemooljiang/vue-14)
* [vue-router路由的参数和设计 / 网络研习社#15]( https://steemit.com/cn/@lemooljiang/vue-router-15)
* [webpack前端神器 / 网络研习社#16]( https://steemit.com/cn/@lemooljiang/webpack-16)
* [用FileZilla作FTP文件服务器 / 网络研习社#17](https://steemit.com/cn/@lemooljiang/filezilla-ftp-17)
* [连接FTP文件服务器的方法/ 网络研习社#18](https://steemit.com/cn/@lemooljiang/ftp-18)
* [axios请求HTTP和vuex数据管理 / 网络研习社#19](https://steemit.com/cn/@lemooljiang/axios-http-vuex-19)
* [YouTube 视频下载利器—Youtube-DLG / 网络研习社#20](https://steemit.com/cn/@lemooljiang/youtube-youtube-dlg-20)
* [Vue和django rest framework做前后端分离设计 / 网络研习社#21](https://steemit.com/cn/@lemooljiang/vue-django-rest-framework-21)
****
　@lemooljiang  #network-institute