跨域跨域跨域，从此say goodbye

跨域这个问题每个开发者都会遇到，只是时间先后而已，你不搞清楚它他就像狗皮膏药一样粘着你，在你求职生涯中不停的遇到，然后你每次都要做这个功课，终于有一天这个名词已经让我忍无可忍了，下定决心必须搞定它，要和它say goodbye！！

 

什么是跨域？

小老百姓而已啦，写个接口吃个饭而已，时不时就跟你搞个一大串红色英文，看也看不懂，查查才知道，哦，你跨域了。要想搞清楚跨域，那就要先知道什么是跨域，先看看官方怎么说的浏览器的同源策略。

没办法，官方文档就是这么含蓄，欲擒故纵，让你似懂非懂，不过没关系，我们大概知道了，是由于浏览器的同源策略导致的。

我们来简单解释下浏览器的同源策略是干嘛使的。

浏览器是这么甩锅的：“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。”

简单来说就是：好比在一个浏览器上访问两个不同的网站，这两个网站页面有自己的脚本，他们在访问请求服务器资源时，浏览器会检查它们属于哪个网站或者说服务器，如果它跨服务器访问了，那么浏览器就拒绝这种请求

 

如果没有同源策略，会发生什么？

 

你正在www.gouwu.com上买买买，这时候你兄弟给你个毛片链接 www.maopian.com，在你看着正嗨，不知不觉中这个毛片网站，正在拿着你的登陆信息去访问www.gouwu.com，这时候你的手机收到银行短信，***支出100万，请尽快还款！   

这就是我们django里面的csrf跨域请求伪造防范的事情。。。。。

 

好了，扯了这么久，那么解决方案出炉！

 

解决方案

1.安装django-cors-headers

pip3 install django-cors-headers

2.配置settings.py文件

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
 ] 

MIDDLEWARE = (
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware', # 注意顺序
    ...
)
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    '*'
)

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

OK！问题解决！

其他解决方案

另外还从网上看到其他两种解决方案，但都不太合适。在此列出，供大家参考

1.使用JSONP

使用Ajax获取json数据时，存在跨域的限制。不过，在Web页面上调用js的script脚本文件时却不受跨域的影响，JSONP就是利用这个来实现跨域的传输。因此，我们需要将Ajax调用中的dataType从JSON改为JSONP（相应的API也需要支持JSONP）格式。 
JSONP只能用于GET请求。

2.直接修改Django中的views.py文件

修改views.py中对应API的实现函数，允许其他域通过Ajax请求数据： 
def myview(_request): 
response = HttpResponse(json.dumps({“key”: “value”, “key2”: “value”})) 
response[“Access-Control-Allow-Origin”] = “*” 
response[“Access-Control-Allow-Methods”] = “POST, GET, OPTIONS” 
response[“Access-Control-Max-Age”] = “1000” 
response[“Access-Control-Allow-Headers”] = “*” 
return response