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

1 什么是 CORS?

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

2 什么是跨域

如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容
如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.

由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表(来源)

跨域说明

3 问题

在 django 和vue.js 的一个项目中,做RESTFUL接口遇到跨域问题,在同一个主域名下,子域名不同, 用get方式可以成功访问,用post方式访问报跨域错误,无法访问

网上查到的 jsonp解决方法问题在于只支持 GET方法,无法支持POST。

4 解决方法

通过在服务器端引入cors解决跨域问题,形成和vue.js联合使用

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'

)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在项目开发过程中,遇到了Ajax跨域访问资源的问题,提示出现了类似于下面这样的错误: Cross-Origin R...
    vito1994阅读 9,217评论 5 14
  • 一、浏览器的同源策略 1.什么是同源? 所谓“同源”指的是”三个相同“。相同的域名、端口和协议,这三个相同的话就视...
    徐国军_plus阅读 4,308评论 1 3
  • 什么是跨域? 2.) 资源嵌入:、、、等dom标签,还有样式中background:url()、@font-fac...
    电影里的梦i阅读 6,929评论 0 5
  • 苑中有嘉树 风过满庭香 ——烟霏云敛天高日晶,看这白云如絮,轻寒可人天。 桀骜的秋天,是落霞与孤鹜齐飞秋水共长天一...
    草率和贪婪阅读 2,593评论 0 0
  • 晚起毁上午 早起困一天 昨天晚起 今天早起 这篇文只能注水了 晚睡晚起 时间够长 不解释 体重降了一点...
    YvonneCCC阅读 1,423评论 0 0