前后端分离django-restframework——解决跨域请求

为什么会出现跨域问题？
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

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

比如一个链接：http://www.baidu.com（端口默认是80端口），

如果再来一个链接是这样：http://api.baidu.com，这个就算是跨域了（因为域名不同）

再来一个：https://www.baidu.com，这个也是跨域了（因为协议不同，用的https）

再来一个http://www.baidu.com:8888，这个也算跨域，端口号不同

举个实际的例子：

• API接口数据部署在baidu.com上；
• Ajax文件部署在cnblogs.com上，Ajax文件会向API （baidu.com） 发送请求，返回数据；
• 用户通过bing.com访问cnblogs.com的Ajax文件，请求数据

以上过程就发生了跨域访问。如果直接使用Ajax来请求就会失败，就像Chrome提示的：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

跨域直白点就是，请求协议，域名（IP），端口号，三个其中任何一个不同都算跨域

CORS

CORS（跨域资源共享，Cross-Origin Resource Sharing）是一种跨域访问的机制，可以让Ajax实现跨域访问 

那么如果跨域是什么样的呢？比如，我这里有个restframework项目作为服务器，项目名为drfversion，测试的app名叫testapp，url如下：

view:

启动项目，直接访问这个API接口测试：

在django的templates目录下新建一个test.html，简单的建立了一个vue和axios的项目，作为前端的异步请求，写入以下参数：

点那个谷歌浏览器图标，然后直接谷歌浏览器打开，这里这个功能是pycharm给我们提供的功能，此时这个作为客户端，访问：

里面的这个参数提示就是跨域了，浏览器默认有个同源策略，他检测到这个http://localhost:63342的url与我们后端启动的DRF项目url:http://127.0.0.1:8000/test/不同源，也就是跨域了，所以报错。

再看接口，看其实后端没有错误，已经给我们返回了数据：

所以跨域请求的根本原因是浏览器的同源策略造成的，要解决这个跨域请求就可以在这方面研究了

而跨域分简单请求和复杂请求

简单请求

HTTP方法是只能是HEAD， GET和POST

HTTP头信息不超出以下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type

而且Content-Type只能是下列类型：

• application/x-www-from-urlencoded
• multipart/form-d