用CORS 解决vue.js django跨域调用

简介:

Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 JSONP 模式的现代版。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest,这种方式的错误处理比 JSONP 要来的好。另一方面,JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。

引入 django-cors-middleware

pip install django-cors-middleware
在 settings.py中添加,注意:不添加的话无法生效

INSTALLED_APPS = (
...
'corsheaders',
)
添加 中间件 监听

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
]
配置允许跨域访问的域名

CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
'google.com',
'hostname.example.com'
)
默认值是全部:

CORS_ORIGIN_WHITELIST = ()
或者定义允许的匹配路径正则表达式.

CORS_ORIGIN_REGEX_WHITELIST = ('^(https?://)?(\w+.)?>google.com$', )
默认值:

CORS_ORIGIN_REGEX_WHITELIST = ()
设置允许访问的方法:

CORS_ALLOW_METHODS = (
'GET',
'POST',
'PUT',
'PATCH',
'DELETE',
'OPTIONS'
)
设置允许的header:

默认值:

CORS_ALLOW_HEADERS = (
'x-requested-with',
'content-type',
'accept',
'origin',
'authorization',
'x-csrftoken'
)


本文转自 aaron428 51CTO博客,原文链接:http://blog.51cto.com/aaronsa/2071108


相关文章
|
2月前
|
JavaScript 前端开发 安全
在 Vue 项目中配置 CORS 的方法
【10月更文挑战第20天】在 Vue 项目中配置 CORS 需要综合考虑后端服务器配置、代理服务器使用以及前端的有限配置等多种因素。通过合理的配置和处理,可以有效地解决跨域问题,为项目的顺利进行提供保障。
|
7月前
|
资源调度 前端开发 JavaScript
Vue3中如何使用axios进行Ajax请求?
Vue3中如何使用axios进行Ajax请求?
258 1
|
7月前
|
JSON JavaScript 前端开发
JS解决跨域问题
JS解决跨域问题
70 0
|
JavaScript 前端开发 安全
【Vue】ElementUI实现登录注册+axios全局配置+CORS跨域
【Vue】ElementUI实现登录注册+axios全局配置+CORS跨域
66 0
vue2 axios跨域解决方法 和nodejs+express跨域
vue2 axios跨域解决方法 和nodejs+express跨域
247 0
|
前端开发 JavaScript
js - 前端跨域
端口号范围 0 ~ 65535
|
JSON 前端开发 JavaScript
ajax和vue.js
ajax和vue.js
|
JavaScript 前端开发
js处理跨域问题
在JS中,跨域指的是在浏览器中使用Ajax等方式向其他域名的服务器请求数据时出现跨域问题,导致请求失败或数据无法返回的问题。为了解决这个问题,可以采用以下方法:
93 0
|
JavaScript API
vue 使用axios 并且实现开发环境的跨域
vue 使用axios 并且实现开发环境的跨域
vue 使用axios 并且实现开发环境的跨域
|
JavaScript 前端开发
vue怎么调用mock.js 拦截ajax请求
vue怎么调用mock.js 拦截ajax请求
下一篇
无影云桌面