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

vue rest.jpg

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

一、创建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

网络研习社系列文章：

@lemooljiang #network-institute

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