一

 

为什么会出现跨域问题

 

 

简单来说，是出于浏览器的同源策略限制。同源策略是一种约定，它是浏览器最核心、也最基本的安全功能，Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的JavaScript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

 

        

 

 

 

二

 

什么是跨域

 

当一个请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同即为跨域。

 

 

 

 

三

 

跨域请求重现

 

①启动一份前端Vue代码，本地地址是:   http://127.0.0.1:8080/

②启动一份后端Django代码，本地地址是:  http://127.0.0.1:8000/

③在登录页面输入账号密码，点击登录时，发现请求报错，聪明的小伙伴可能发现问题了，没错，跨域了。

 

 

 

 

 

四

 

Fiddler调试跨域问题

 

Fiddler可以调试解决跨域问题，但仅适用于浏览器调试阶段。其中Fiddler Script是Fiddler的一个脚本文件，是用JScript.NET语言编写的，可以修改其代码，修改后无需重启Fiddler代码会马上生效。

①Fiddler菜单栏依次选择Rules-->Customize Rules，打开Fiddler ScriptEditor页面。

 

②在OnBeforeResponse函数内，写入以下代码，保存。

static function OnBeforeResponse(oSession: Session) {
        if (m_Hide304s && oSession.responseCode == 304) {
            oSession["ui-hide"] = "true";
        }
        
        // 需要添加的代码
        if(oSession.uriContains("http://127.0.0.1:8000")){
           oSession.oResponse["Access-Control-Allow-Origin"] =  "http://127.0.0.1:8080";
           oSession.oResponse["Access-Control-Allow-Credentials"] = true;
           oSession.oResponse["Access-Control-Allow-Headers"] = "accept,content-type, x-requested-with";
            
        }
    }

③在页面点击登录，发现可以正常登录。

 

虽然Fiddler可以调试解决跨域问题，但没有实际解决问题，为了避免纸(文)上(章)谈(太)兵(短)，我们结合实际项目解决跨域问题。

 

 

 

 

五

 

Django解决跨域

 

现在的项目一般都是前后端分离，前端与后端分处不同的域名，所以需要解决跨域问题。本项目为Django+Vue搭建的前后端分离项目。

 

在Django中使用django-cors-headers解决跨域问题，官方文档传送门：

https://pypi.org/project/django-cors-headers/

 

①安装django-cors-headers, 用于处理跨源资源共享(CORS)所需的服务器报头，安装命令：

pip install django-cors-headers

 

②将安装的应用注册，在项目的setting配置添加：

INSTALLED_APPS = [
    'corsheaders',
]

 

③添加中间件，在项目的setting配置添加：

MIDDLEWARE = [
    # cors 加在CommonMiddleware前面
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

④添加白名单，在项目setting配置添加：

# 允许所有源访问
CORS_ORIGIN_ALLOW_ALL = True

或者添加指定域名或ip：

# CORS_ORIGIN_WHITELIST指定能够访问后端接口的ip或域名
CORS_ORIGIN_WHITELIST = {
    'http://127.0.0.1:8080',
    'http://localhost:8080',
 }

⑤允许跨域访问带cookie：

# 允许跨域时携带cookie，默认为False
CORS_ALLOW_CREDENTIALS = True

总结：本文介绍了跨域原理、Fiddler调试跨域、Django在实际项目中如何处理跨域。当然处理跨域请求还有很多方式，聪明的你可以自行扩展学习。