Ajax中的同源政策

Ajax请求限制

Ajax只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站,A网站中的HTML文件只能向A网站服务器中发送Ajax请求,B网站中的HTML文件只能向B网站中发送Ajax请求,但是A网站是不能向B网站发送Ajax请求的,同理,B网站也不能向A网站发送Ajax请求。

什么是同源

如果两个页面拥有相同的协议域名端口,那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源。

同源政策的目的

同源政策是为了保证用户信息的安全,防止恶意的网站窃取数据。最初的同源政策是指A网站在客户端设置的Cookie,B网站是不能访问的。

随着互联网的发展,同源政策也越来越严格,在不同源的情况下,其中有一项规定就是无法向非同源地址发送Ajax请求,如果请求,浏览器就会报错。

测试:测试非同源Ajax请求!!

  1. 第一步当然就是你得有两个不是同源的本地的服务器了!端口不同即可!

  2. 第二步就是在二号服务器中的qpp.js写一个测试路由!如图!

  3. 第三步就是在一号服务器里的lvhang文件夹下面创建一个访问二号服务器html文件!为什么是这个文件夹呢?!因为我的工作目录就是拼接的这个目录!也就是说是自定义的!

  4. 然后就是在刚刚创建的html文件中写Ajax的实现步骤代码!
	<script type="text/javascript">
// 1 创建Ajax对象
let xhr = new XMLHttpRequest();
// 2 告诉Ajax对象要想哪儿发送请求,以什么方式发送请求
// 1)请求方式2)请求地址
xhr.open('get', 'http://localhost:3001/test');
// 发送请求
xhr.send();
// 获取服务器端响应到客户端的数据!
xhr.onload = function() {
console.log(xhr.responseText)
} </script>
  1. 最终的效果:



    Access to XMLHttpRequest at 'http://localhost:3001/test' from origin 'http://localhost:3003' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

出现上面的报错信息就代表Ajax不能够向非同源的服务器发送请求!

Ajax中的同源政策的更多相关文章

  1. 从发请求到AJAX到同源政策

    1  发请求的各种方法 使用form标签(会在当前页面刷新或者新开一个页面刷新) <form action="" method=post/get> <input ...

  2. 解决Ajax同源政策的方法【JSONP + CORS + 服务器端解决方案】

    解决Ajax同源政策的方法 使用JSONP解决同源限制问题 jsonp是json with padding的缩写,它不属于Ajax请求,但它可以模以Ajax请求.\ 步骤 1.将不同源的服务器端请求地 ...

  3. JavaScript JSON timer(计时器) AJAX HTTP请求 同源策略 跨域请求

    JSON 介绍 1. JSON: JavaScript Object Notation 是一种轻量级的数据交换格式. 它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是 ...

  4. (三)ajax请求不同源之cors跨域

    一.基本原理 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)它允许浏览器向跨源服务器,发出 XMLHttpReque ...

  5. 浏览器-同源政策(same-origin policy)

    浏览器安全的基石是“同源政策”(same-origin policy). 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这个政策. 何为同源? 协议相同 域名相同 端 ...

  6. 破解浏览器同源政策利器之JSONP

    本文是在了解了浏览器的同源规则之后,学习了破解这个规则的一个简单有效的方法->JSONP.主要通过阮一峰老师的博客学习 浏览器的同源规则 有这样一个背景,如果你通过银行的网站进行的取钱的交易,而 ...

  7. 使用HTML5中postMessage实现Ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

  8. 使用HTML5中postMessage 实现ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

  9. ajax中的json和jsonp详解

    出现的问题: 花了点时间研究ajax中的json和jsonp的原理,这里记录一下.以前一直在使用ajax调用数据,但是从来没有遇到跨域问题,也从来没有注意过json和jsonp的区别,总是一通乱用.但 ...

随机推荐

  1. 7.mysql8.0版本MGR搭建

    搭建MGR 1.配置文件 loose-group_replication_ip_whitelist = 192.168.124.0/24 loose-group_replication_start_o ...

  2. MM-RFQ询价报价

    (1).询价报价单事务码:ME41/ME42/ME43 需要的主数据:采购组织.供应商.采购组,物料 (2)ME47:维护供应商的报价.可以用项目明细的条件对供应商的报价进行详细设置. (3)供应商价 ...

  3. [leetcode]24. Swap Nodes in Pairs交换链表的节点

    感觉这个题后台的运行程序有问题,一开始自己想的是反转链表那道题的方法,只是隔一个节点执行一次,但是没有通过,TLE了,但是很奇怪,并没有死循环,就是最后返回的时候超时. 最后的思路就是很简单的进行交换 ...

  4. 一次失败的java Box居中尝试

    效果如下: 通过Box的应该虽然实现了居中,但是页面相当丑!且不能插入JTextField等文本框,总的来说相当失败!!! import javax.swing.Box; import javax.s ...

  5. JS中var与let的区别

    区别: var声明的变量,其作用域在该语句所在的函数之内,存在着变量提升的现象. let声明的变量,其作用域为该句所在的代码块内,不存在变量提升的问题. let相比于var,其不允许在相同作用域内,重 ...

  6. TurtleBot3使用课程-第一节b(北京智能佳)

    目录 1.模拟运行TurtleBot 2 1.1 ROS安装和设置2 1.1.1 turtlebot3 在Gazebo中模拟 3 1.1.1.1用于Gazebo的ROS包装 3 1.1.1.2 tur ...

  7. TurtleBot3 Waffle (tx2版华夫)(4)笔记本与TX2的通信

    4.1. 使用vnc控制华夫Turbot3-Tx2开发板 1) 电脑端安装vnc viewer,您可以选择应用商城下载安装即可: 2) 下载后打开,键入Turbot3的ip à回车à选择连接: 3)  ...

  8. vuetify 属性集合

    1.v-form 组件具有 three 功能,可以通过在该组件上设置 ref 来访问它们. ref 允许我们访问组件上的内部方法,例如 <v-form ref="form"& ...

  9. 利用python 5分钟制作一款小游戏

    1.安装pygame 在命令行cmd中输入:pip install pygame ( 注:如果安装不成功,需要输入:python -m pip install --user --upgrade pip ...

  10. Laravel - 验证码

    安装扩展包 使用 Composer 安装: composer require "mews/captcha:~2.0" 运行以下命令生成配置文件 config/captcha.php ...