使用cors完成跨域请求处理( 二 ) _跨域请求

上述代码由 http://localhost:3000/index.html 向 http://localhost:4000/ 跨域请求，正如我们上面所说的，后端是实现 CORS 通信的关键。
应用django-cors-headersdrf后端+vue前端的项目在做以drf框架作为后端支撑以及以vue前端框架作为页面展示的前后端分离的web项目中，前端会向后端请求数据，也会涉及到非同源跨域的问题，以下操作将做详细处理
# vue前端域名www.aliang.cn# drf后端域名api.aliang.com修改vue项目的配置信息

通过浏览器访问前端vue项目，会出现Nginx的欢迎页面，主要因为我们当前操作中已经有一个nginx监听了80端口，所以访问 www.aliang.cn 网址时，会自动被转发到127.0.0.1本机，因为没有网址默认端口是80端口，所以被nginx进行处理了当前请求，因此我们暂时先把nginx关闭。

# 查找nginx的进程ps -ef|grep nginx# 关闭进程sudo kill -9 nginx进程号

修改vue项目的配置文件config/index.js

host: 'www.aliang.cn', // can be overwritten by process.env.HOSTport: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determinedautoOpenBrowser: true,

保存修改信息，并重启项目
通过浏览器访问drf项目,会出现以下错误信息You may need to add 'api.aliang.com' to ALLOWED_HOSTS
可以通过设置drf项目中的配置文件， settings/dev.py的ALLOWED_HOSTS ，设置允许访问

# 设置哪些客户端可以通过地址访问到后端ALLOWED_HOSTS = ['api.aliang.cn',]

现在，前端与后端分处不同的域名，我们需要为后端添加跨域访问的支持否则前端使用axIOS则无法请求到后端提供的api数据，故使用CORS来解决后端对跨域访问的支持。

使用django-cors-headers扩展

安装

pip install django-cors-headers -i https://pypi.douban.com/simple/

drf后端项目配置文件中添加应用

INSTALLED_APPS = (...'corsheaders',...)

drf后端项目配置文件中设置中间件【必须写在第一个位置】

MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware',...]

drf后端项目配置文件中添加白名单

# CORS组的配置信息CORS_ORIGIN_WHITELIST = ('www.aliang.cn:8080',)CORS_ALLOW_CREDENTIALS = True# 允许ajax跨域请求时携带cookie

完成了上面的步骤，我们就可以通过后端提供数据给前端使用ajax访问了。

前端使用 axios就可以访问到后端提供给的数据接口，但是如果要附带cookie信息，前端还要设置一下。需要注意的是，如果要发送Cookie， Access-Control-Allow-Origin 就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的 document.cookie 也无法读取服务器域名下的Cookie 。
前端引入axios插件并配置允许axios发送cookie信息[axios本身也不允许ajax发送cookie到后端]

npm i axios -S

在main.js中引用 axios插件

import axios from 'axios'; // 从node_modules目录中导入包// 允许ajax发送请求时附带cookieaxios.defaults.withCredentials = true;Vue.prototype.$axios = axios; // 把对象挂载vue中

如果你拷贝前端vue-cli项目到咱们指定目录下，如果运行起来有问题，一些不知名的错误，那么就删除node_modules文件件，然后在项目目录下执行 npm install 这个指令，重新按照package.json文件夹中的包进行node_modules里面包的下载
原文作者:阿良
原文链接:https://www.cnblogs.com/fengting0913/p/13451489.html

【使用cors完成跨域请求处理】