CORS处理跨域问题

“前后端分离的项目必然会遇到一个典型的问题——跨域问题。”

跨域

       要解决跨域问题，首先得知道什么是跨域？

       首先，跨域是访问的域名或IP、端口三者有一不同都属于跨域。（注意请求路径不是），即使在本地测试，前后端分离使用的端口号也会不同。【不跨域的，我们称为同源，跨域问题本质上源于浏览器的同源策略】

       另外，经查询，跨域问题仅针对浏览器，即浏览器才有跨域问题的发送。

        那么跨域问题会产生什么？即“跨不过去”了呗，前端请求不到后端，后端响应不回前端。虽然如此，这个浏览器即使有这个同源策略，但还是会尝试去请求，比如前端访问，浏览器还是会尝试去访问后端。

        解决方法：通常有NGINX和CORS等处理，因为本文是针对Django的，那么选CORS解决会较为简单一些。

CORS操作

        浏览器为了安全，所以阻挡了跨域（否则共享cookie就麻烦了）。但浏览器还是会试图发起请求。

     浏览器的尝试请求是可以测试得到的。用前后端分离的vue+django项目在Pycharm控制台还是响应出了200，这就说明浏览器把请求打过来，只是又拦截掉了而已）

           用开发者工具看到看到错误：

       浏览器通过检测响应头有无 Access-Control-Allow-Origin（有这个头就可以）

        下面是Django项目的处理方案：
 

配置文件（添加）：

这里假定本地的前端的访问为127.0.0.1:8080

INSTALLED_APPS = [    ...    'corsheaders',   # 解决跨域CORS    ...]​MIDDLEWARE = [  'corsheaders.middleware.CorsMiddleware',    # 最外层的中间件（先解决跨域问题了再走下面的中间件，所以放最前面）    ...]​# 允许哪些域名访问DjangoALLOWED_HOSTS = ['127.0.0.1', 'Localhost']​# CORS追加白名单（显然针对的是前端域名）（后端可能自己识别不到自己吗？）CORS_ORIGIN_WHITELIST = (  '127.0.0.1:8080',  'localhost:8080',)​CORS_ALLOW_CREDENTIALS =True # 允许携带cookie

运行可能会出错：

?: (corsheaders.E013) Origin '127.0.0.1:8080' in CORS_ORIGIN_WHITELIST is missing scheme or netlocHINT: Add a scheme (e.g. https://) or netloc (e.g. example.com).?: (corsheaders.E013) Origin 'localhost:8080' in CORS_ORIGIN_WHITELIST is missing scheme or netlocHINT: Add a scheme (e.g. https://) or netloc (e.g. example.com).

解决：（CORS_ORIGIN_WHITELIST前面配上http://即可，配置过HTTPS的，就切https://）

CORS_ORIGIN_WHITELIST = (  'http://127.0.0.1:8080',  'http://localhost:8080',)

允许跨域了，需要在返回的响应头中携带下面信息：

• Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*（代表任意）

• Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true

• 这个OPTIONS就是那个尝试请求的标识

“