1.浏览器的同源策略及规避方法

  目前,所有浏览器都实行同源政策。即协议、域名、端口都相同的URI称为"同源"。不同源的url之间:

a.无法读取cookie、localstorage、indexDB

b.无法获取DOM

c.无法发送ajax请求

document.domain规避半同源网页间不能共享cookie:

    cookie是服务器写入浏览器的一段信息。同源网页之间才能共享cookie。

    一级域名相同,二级域名不同的网页之间允许通过设置document.domain='一级域名'的方式共享cookie。另外服务器在设置cookie的时候,指定cookie所属的域名为一级域     名,这样的话不需要做任何操作.

  postMesage规避不同源网页之间不能共享数据:

    html5新增的跨文档通信API为window对象新增了一个方法window.postMesage允许跨窗口通信,无论这两个窗口是否同源。

postMessage方法有两个参数,第一个为需要传递的数据,第二个为传送目标窗口地址。通过window.addEventListener('message',function(){})监听window的message事件    获取数据。message事件的event对象有三个属性:event.source =>发送消息的窗口  event.origin=>消息发向的网址  event.data=>消息内容。

window.name规避父子窗口之间不能共享数据:(父窗口打开iframe子窗口)

    浏览器窗口有window.name属性。这个属性的最大特点是,无论是否同源,只要在同一个窗口里,前一个网页设置了这个属性,后一个网页可以读取它。

    这种方法的优点是,window.name容量很大,可以放置非常长的字符串;缺点是必须监听子窗口window.name属性的变化,影响网页性能。

  

2.ajax请求跨域

  同源政策规定,AJAX请求只能发给同源的网址,否则就报错。

除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制:

    a.jsonp (利用script标签不受同源策略影响,只支持get方式,一般用jquery的jsonp封装,接口需在返回值的外面包回调函数)

    b.websocket(一种通信协议,不受同源策略影响)

    c.cors(CORS是跨源资源分享(Cross-Origin Resource Sharing)的缩写。是跨源AJAX请求的根本解决方法。)

  

 CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
 整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。
 浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
  因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

  常见后端解决方案:

  PHP后台配置

  PHP后台得配置几乎是所有后台中最为简单的,遵循如下步骤即可:

  • 第一步:配置Php 后台允许跨域

<?php header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

//主要为跨域CORS配置的两大基本信息,Origin和headers

  • 第二步:配置Apache web服务器跨域(httpd.conf中)

  原始代码

<Directory />

AllowOverride none

Require all denied

</Directory>

  改为以下代码

<Directory />

Options FollowSymLinks

AllowOverride none

Order deny,allow

Allow from all

</Directory>



  JAVA后台配置

  JAVA后台配置只需要遵循如下步骤即可:

  • 第一步:获取依赖jar包下载 cors-filter-1.7.jar, java-property-utils-1.9.jar 这两个库文件放到lib目录下。(放到对应项目的webcontent/WEB-INF/lib/下)

  • 第二步:如果项目用了Maven构建的,请添加如下依赖到pom.xml中:(非maven请忽视)

<dependency>

<groupId>com.thetransactioncompany</groupId>

<artifactId>cors-filter</artifactId>

<version>[ version ]</version>

</dependency>

  其中版本应该是最新的稳定版本,CORS过滤器

  • 第三步:添加CORS配置到项目的Web.xml中(  App/WEB-INF/web.xml)

<!-- 跨域配置-->

<filter>

<!-- The CORS filter with parameters -->

<filter-name>CORS</filter-name>

<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>

<!-- Note: All parameters are options, if omitted the CORS

Filter will fall back to the respective default values.

-->

<init-param>

<param-name>cors.allowGenericHttpRequests</param-name>

<param-value>true</param-value>

</init-param>

<init-param>

<param-name>cors.allowOrigin</param-name>

<param-value>*</param-value>

</init-param>

<init-param>

<param-name>cors.allowSubdomains</param-name>

<param-value>false</param-value>

</init-param>

<init-param>

<param-name>cors.supportedMethods</param-name>

<param-value>GET, HEAD, POST, OPTIONS</param-value>

</init-param>

<init-param>

<param-name>cors.supportedHeaders</param-name>

<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>

</init-param>

<init-param>

<param-name>cors.exposedHeaders</param-name>

<!--这里可以添加一些自己的暴露Headers   -->

<param-value>X-Test-1, X-Test-2</param-value>

</init-param>

<init-param>

<param-name>cors.supportsCredentials</param-name>

<param-value>true</param-value>

</init-param>

<init-param>

<param-name>cors.maxAge</param-name>

<param-value>3600</param-value>

</init-param>

</filter>

<filter-mapping>

<!-- CORS Filter mapping -->

<filter-name>CORS</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

  请注意,以上配置文件请放到web.xml的前面,作为第一个filter存在(可以有多个filter的)

  • 第四步:可能的安全模块配置错误(注意,某些框架中-譬如公司私人框架,有安全模块的,有时候这些安全模块配置会影响跨域配置,这时候可以先尝试关闭它们)

 

  Node.js后台配置(express框架)

  Node.js的后台也相对来说比较简单就可以进行配置。只需用express如下配置:

app.all('*', function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "X-Requested-With");

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

res.header("X-Powered-By", ' 3.2.1')

//这段仅仅为了方便返回json而已

res.header("Content-Type", "application/json;");

if(req.method == 'OPTIONS') {

//让options请求快速返回

res.sendStatus(200);

} else {

next();

}

});



ajax跨域请求问题及解决办法总结的更多相关文章

  1. Ajax跨域请求以及乱码解决

    Ajax跨域请求2种解决方法 1 ) 什么叫跨域请求,协议,域名,端口号,其中一样不同都称跨域; 第一种:使用script标签发送请求; //创建一个script标签; var v_element=d ...

  2. 关于CSRF跨域请求伪造的解决办法

    中秋节时候我们的应用在短信验证码这块被恶意刷单,比如被用来做垃圾短信之类的,如果大规模被刷也能造成不小的损失.这还只是短信验证码,如果重要的API遭到CSRF的攻击,损失不可估量.所以紧急加班解决了C ...

  3. Ajax跨域请求怎么解决?

    前言 项目中需要将第三方系统中,对应用户的代办消息集成到系统中.对方提供了获取对应用户的接口url,但是由于两边的系统是部署到客户现场不同IP的虚机上的,所以进行ajax请求的时候是属于跨域请求的.之 ...

  4. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  5. 用iframe设置代理解决ajax跨域请求问题

    面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题.在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到aja ...

  6. Jquery DataTable AJAX跨域请求的解决方法及SSM框架下服务器端返回JSON格式数据的解决方法

    如题,用HBuilder开发APP,涉及到用AJAX跨域请求后台数据,刚接触,费了不少时间.幸得高手指点,得以解决. APP需要用TABLE来显示数据,因此采用了JQ 的DataTable.  在实现 ...

  7. JQuery的Ajax跨域请求的解决方式

            今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究 ...

  8. 第114天:Ajax跨域请求解决方法(二)

    一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号)       www  (子 ...

  9. 第113天:Ajax跨域请求解决方法

    一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要 ...

随机推荐

  1. HTTP协议扫盲(三)HTTP协议的请求头列表和分类描述

    一.请求报头和响应报头列表 1.Requests 头列表 Header 解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html Accept ...

  2. JsonCPP库使用

    1.使用环境DevC++ a.建立C++工程,并添加.\JsonCPP\jsoncpp-master\jsoncpp-master\src\lib_json中源文件到工程中. b.添加头文件路径 2. ...

  3. python/MySQL练习题(二)

    python/MySQL练习题(二) 查询各科成绩前三名的记录:(不考虑成绩并列情况) select score.sid,score.course_id,score.num,T.first_num,T ...

  4. python 字符串 字节

    字符串 字节   a. 字符串转字节 1 2 key = "xxxx" bkey = bytes(key,encoding='utf-8') b. bytearray 数组 1 2 ...

  5. python--socket粘包

    socket粘包 1 什么是粘包 须知:只有TCP有粘包现象,UDP永远不会粘包,首先需要掌握一个socket收发消息的原理, 所谓粘包问题主要还是因为接收方不知道消息之间的界限,不知道一次性提取多少 ...

  6. 一、Python3.6+PyQt5 安装

    一.安装PyQt5 方法一:使用pip3工具直接安装 直接在命令行中输入: Python 3.x pip3 install PyQt5 pip3 install PyQt5-tools Python ...

  7. 一日一练-CSS-CSS 居中

    特别声明:此篇文章内容来源于@CHRIS COYIER 的Centering in CSS:A Complete Guide 子曰:CSS 居中是一个非常常见的问题,无论是在项目中,还是在各种面试资料 ...

  8. 2018 php的flush和ob_flush不起作用 整理解决

    2018 php的flush和ob_flush不起作用 整理解决成功解决. 要点 : 使用函数 str_repeat2处配置:检查php.ini.Nginx 中有下面两个设置使用方式:echo str ...

  9. Spring学习之AOP与事务

      一.概述 在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续, ...

  10. hdu1222&hdu1014 循环群的生成元

    hdu1222 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1222 题目大意: 大灰狼追小白兔.小白兔可以躲起来的洞绕成一个圈,大灰狼从0这个点出 ...