浏览器的同源策略和CORS跨域

浏览器的同源策略和CORS跨域

什么是同源:

域名/ip + 端口 + 协议

http协议默认端口:80

https协议默认端口:443

浏览器对于非同源的请求会拒绝接受响应信息。

前后端分离的项目一般都会涉及到跨域问题

JSONP跨域(之前的解决方案)

不足:

只能GET请求

前端和后端都要支持

原理:

利用的就是浏览器对加载静态资源不做限制,比如 <script src="跨域的地址"></script>

jQuery版JSONP

$.getJSON("http://127.0.0.1:8000/index/?callback=?", function(res){

console.log(res);

})

CORS跨域

简单请求和非简单请求

简单请求同时满足两大类条件:

1请求方法:

HEAD、GET、POST

2.请求头

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

如果发送的是PUT或DELETE请求就是费简单请求

再比如发送的是 Content-Type:application/json也是非简单请求

简单请求的处理方案:

在响应头加一个Access-Control-Allow-Origin * --》 允许任何源给我发跨域请求

在响应头加一个Access-Control-Allow-Origin 127.0.0.1:8000 --》只允许 127.0.0.1:8000 给我发跨域请求

非简单请求:

浏览器会提前发一个 OPTIONS的预检请求

在响应头加一个Access-Control-Allow-Methods:‘PUT, DELETE‘ --》允许浏览器给我发PUT和DELETE的跨域请求

在响应头加一个Access-Control-Allow-Headers: ‘Content-Type‘ --》 允许浏览器给我发请求头中修改Content-Type字段

使用django-cors-headers包

pip install django-cors-headers

在中间件中注册

MIDDLEWARE = [

‘corsheaders.middleware.CorsMiddleware‘, # 添加中间件

‘django.middleware.security.SecurityMiddleware‘,

‘django.contrib.sessions.middleware.SessionMiddleware‘,

django.middleware.common.CommonMiddleware‘,

# ‘django.middleware.csrf.CsrfViewMiddleware‘,

‘django.contrib.auth.middleware.AuthenticationMiddleware‘,

‘django.contrib.messages.middleware.MessageMiddleware‘,

‘django.middleware.clickjacking.XFrameOptionsMiddleware‘,

]

在Django的settings.py中配置:

CORS_ORIGIN_ALLOW_ALL = True # 允许任何网站都来发跨域请求

配置可跨域访问的白名单:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (

# ‘<YOUR_DOMAIN>[:PORT]‘,

‘127.0.0.1:8080‘

)

原文地址:https://www.cnblogs.com/hdy19951010/p/10447096.html

时间: 2024-10-14 11:34:38

浏览器的同源策略和CORS跨域的相关文章

jsonp突破同源策略,实现跨域访问请求

跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一下"同源策略(Same-Origin Policy)",它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源,就是必须协议.域名.端口都一致的,才叫做同源.例如:http://www.12306.cn和https://www.

浏览器同源策略,及跨域解决方案

一.Origin(源) 源由下面三个部分组成: 域名 端口 协议 两个 URL ,只有这三个都相同的情况下,才可以称为同源. 下来就以 "http://www.example.com/page.html" 这个链接来比较说明: 对比URL 结果 原因 http://m.example.com/page.html 不同源 域名不同 https://www.example.com/page.html 不同源 协议不同 http://www.example.com:8080/page.htm

浏览器同源策略与ajax跨域方法汇总

原文 什么是同源策略 如果你进行过前端开发,肯定或多或少会听说过.接触过所谓的同源策略.那么什么是同源策略呢? 要了解同源策略,首先得理解“源”.在这个语境下,源(origin)其实就是指的URL.所以,我们需要先理解URL的组成.看看这个URL: http://www.jianshu.com/p/bc7b8d542dcd 我们可以将它拆解为下面几个部分协议.域名和路径: http :// www.jianshu.com /p/bc7b8d542dcd ${protocol}:// ${host

浏览器的同源策略和跨域访问

1. 什么是同源策略 理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略.    何谓同源:        URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源.    同源策略:        浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性.        从一个域上加载的脚本不允许访问另外一个域的文档属性. 举个例子:      

浏览器的同源策略与跨域处理

一.  同源策略 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 下表给出了相对http://store.company.com/dir/page.html同源检测的示例: 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互. 允许跨源访问的一些例子: <script src="..."></script> 标签嵌入跨域脚本.语法错误信息只能在同源脚本中捕捉到. <link rel="style

浏览器的同源策略及跨域解决方案

同源策略 一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: URL 结果 原因 http://a.xyz.com/dir2/other.html 成功   http://a.xyz.com/dir/inner/another.html 成功   https://a.xyz.com/secure.html 失败 不同协议 ( https和http ) h

浏览器的同源策略和跨域问题

要理解跨域问题,必须得知道什么是同源策略. 什么是同源策略? 何谓同源:        URL由协议.域名.端口和路径组成. 如果两个URL的协议.域名和端口相同,则表示他们同源.同源策略:        浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性.         从一个域上加载的脚本不允许访问另外一个域的文档属性. 举个例子:        比如一个恶意网站的页面通过iframe嵌入了银行的登录页

CORS——跨域请求那些事儿

在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on the requested resource.这样的报错.这样的错误,一般是由于CORS跨域验证机制设置不正确导致的,本文将详细讲解CORS跨域验证机制的原理,让您轻松掌握CORS跨域设置的使用方法,安全.方便的进行前端开发. 什么是CORS CORS(Cross-Origin Resource Sha

jsonp与cors跨域的一些理解(转)

CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的.CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求. 它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全. 而W3C的官方文档目前还是工作草案,但是正在朝着W3C推荐的方向前进. 简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的. 浏览器的同源策