前端和接口跨域访问

1 业务场景

• 当前产品开发，前端和后端彻底分离，在调试阶段，静态服务器和接口服务器的端口是不一样，先后端通讯时，这里就须要跨域处理， 这点彻底能够再后端进行处理。

• 当用户第一次调用接口时，后端对其设置了相应的 cookie，在第二次调用时，咱们要求前端调用接口时，会发送第一次调用时设置的 cookie。默认状况下，标准的跨域请求是不会发送 cookie 等用户认证凭据的，XMLHttpRequest 2 的一个重要改进就是提供了对授信请求访问的支持。

2 解决方案

2.1 跨域问题

由于仍是使用了 django 框架，因此采用了 django-cors-header 作请求域审核，具体用法请查看 https://github.com/ottoyiu/django-cors-headers

很感谢这个工具，快速解决了跨域问题

2.2 跨域请求发送 cookie

默认状况下 widthCredentials 为 false，咱们须要设置 widthCredentials 为 true

若是使用的是 jquery, 调用方法以下

$.ajax({
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials: true
   }
});

3 举例：

后端业务：好比获取列表接口(使用的是 django-rest-framework)

def list(self, request, *args, **kwargs):
    instance = super(ManufacturerView, self).list(request, *args, **kwargs)
    instance.set_cookie('uuid', 'fkajdflksduiwerw')
    return instance

第一次调用

第二次调用

这里鄙人取了巧，直接忽略 referer 便可，接下会修改

4 小结

这样就简单的解决了前端和后端彻底隔离通讯的问题，根据业务的须要，设计知足本身业务的需求