前端和接口跨域訪問

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 小結

這樣就簡單的解決了前端和後端徹底隔離通訊的問題，根據業務的須要，設計知足本身業務的需求