浏览器同源政策之ajax请求不能发送

同源政策（same-origin policy）是浏览器安全的基石

同源指的是三个相同

限制范围

（1） Cookie、LocalStorage 和 IndexDB 无法读取。（2） DOM 无法获得。（3） AJAX 请求不能发送。

下面重点讲解AJAX 请求不能发送：
同源政策规定，AJAX请求只能发给同源的网址，否则就报错。
有4种方法规避这个限制：

1.JSONP
2.WebSocket
3.CORS
4.架设服务器代理

1.JSONP
它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制(只限制3种，上面有说)；一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据

function addScriptTag(src) {var script = document.createElement('script');script.setAttribute("type","text/javascript");script.src = src;document.body.appendChild(script);
}window.onload = function () {addScriptTag('http://example.com/ip?callback=foo');
}function foo(data) {console.log('Your public IP address is: ' + data.ip);
};

局限性和安全性
1.JSONP仅适用于http的get请求。只能使用GET请求就意味着很多限制,比如：nginx服务器默认的限制是4K或者8K，这是根据服务器的硬件配置有关的，一般为内存一页的大小，目前大部分为4K，即4096字节
2.JSONP缺乏错误处理机制，如果脚本注入成功后，就会调用回调函数，但是注入失败后，没有任何提示。
3.在安全方面，借助JSONP有可能进行跨站请求伪造(CSRF)攻击，当一个恶意网站使用访问者的浏览器向服务器发送请求并进行数据变更时，被称为CSRF攻击。由于请求会携带cookie信息，服务器会认为是用户自己想要提交表单或者发送请求，而得到用户的一些隐私数据

2.WebSocket

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

上面代码中，有一个字段是Origin，表示该请求的请求源（origin），即发自哪个域名。

正是因为有了Origin这个字段，所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出如下回应。
除

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

3.CORS
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。相比JSONP只能发GET请求，CORS允许任何类型的请求。
实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信

基本流程
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

简单请求:只需要在头信息之中增加一个Origin字段。

非简单请求:会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

只要同时满足以下两大条件，就属于简单请求。
1) 请求方法是以下三种方法之一：
HEAD
GET
POST
2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

nodejs下的实现方法：

router.get('/getData', function(req, res, next) {  //设置允许跨域请求  var reqOrigin = req.header("origin");  res.header("Access-Control-Allow-Origin", "http://localhost:3000");  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");  res.json(200, {name:"张三1",age:40});  }

配置项解释
Access-Control-Allow-Origin
该字段必填。它的值要么是请求时Origin字段的具体值，要么是一个*，表示接受任意域名的请求。

Access-Control-Allow-Methods
该字段必填。它的值是逗号分隔的一个具体的字符串或者*，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次”预检”请求。

Access-Control-Expose-Headers
该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie.默认情况下，不发生Cookie，即：false。对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json，这个值只能设为true。如果服务器不要浏览器发送Cookie，删除该字段即可。

Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。在有效期间，不用发出另一条预检请求。

注意:
a.所有浏览器都支持该功能，IE浏览器不能低于IE10
b.CORS请求发送Cookie时，Access-Control-Allow-Origin只能是与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

4.架设服务器代理
浏览器请求同源服务器，再由后者请求外部服务

浏览器同源政策之ajax请求不能发送相关推荐

frame跨页传值/AJAX出错解决方案 + 知识补充：浏览器同源政策
一.同源政策 1.1概念浏览器安全的基石是 "同源政策"(same-origin policy). 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实 ...
浏览器同源政策及其规避方法
浏览器安全的基石是"同源政策"(same-origin policy).很多开发者都知道这一点,但了解得不全面. 本文详细介绍"同源政策"的各个方面,以及如何规 ...
前端基础技术_浏览器同源政策（same-origin policy）及其规避方法
目的:对浏览器的"同源策略"和"同源异构策略(跨域)"有个初步认识. 同源策略:此策略是浏览器和后台通讯之间的一个安全协议的支持,同源指两个网址的协议.域名(或 ...
ajax 发送中,如何在ajax请求中发送图像？
我认为我的架构也是错误的.我不知道如何在没有全局变量的情况下做到这一点.现在当我尝试发送我的ajax请求时,我得到Uncaught TypeError: Illegal invocation.我认为错 ...
js如何发送ajax请求,js 发送ajax请求（XMLHttpRequest）
ajax({ url: "http://localhost:8080/save", type: "POST", data: {}, dataType: &quo ...
chrome浏览器本地文件支持ajax请求的解决方法
1.右键chrome的快捷键--->点击属性 2.在快捷方式的选项卡的目标里末尾填上如下内容: --allow-file-access-from-files要关闭所有的chrome打开的网页转 ...
同源政策（same-origin policy）
前言浏览器同源政策(Same-origin policy) 是浏览器安全的基石.它是前端开发人员必须要理解的一个知识点,也是后面各种实现跨域资源访问方式学习的基础.在接触这方面的知识时个人思考很多, ...
Ajax学习笔记--- 【xmind 详细展示浏览器与服务器端通信，请求与响应报文】
php和express用来做后端,还是express强大和方便!!! 翻看笔记才知道自己当时下载Fiddler,Wampserver,phpstudy_pro是为了什么,实在不敢说自己学过php 文章 ...
React基础-React中发送Ajax请求以及Mock数据
前言在 React 中, render 函数返回的结果,取决于组件的 props 和 state 我们都知道 UI 页面上的数据不是写死的,往往是从后端的数据接口中拿到的然后将真实的数据填充到页面 ...

浏览器同源政策之ajax请求不能发送

浏览器同源政策之ajax请求不能发送相关推荐

最新文章

热门文章