ajax跨域原理以及解决方案

说明

跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题

前言

强烈推荐阅读参考来源中的文章,能够快速帮助了解跨域的原理

参考来源

本文参考了以下来源

什么是跨域

为了更了解跨域的原理,可以阅读参考来源中的文章,里面对跨域的原理讲解很详细到位

ajax跨域的表现

ajax请求时,如果存在跨域现象,并且没有进行解决,会有如下表现

第一种现象:No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 404 ,如图
出现这种情况的原因如下
- 本次ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)
- 服务器端后台接口没有允许OPTIONS请求,导致无法找到对应接口地址
第二种现象:No 'Access-Control-Allow-Origin' header is present on the requested resource和The response had HTTP status code 405 ,如图
这种现象和第一种有区别,这种情况下，后台方法允许OPTIONS请求,但是一些配置文件中(如安全配置),阻止了OPTIONS请求,才会导致这个现象
第三种现象:No 'Access-Control-Allow-Origin' header is present on the requested resource,如图
这种现象和第一种和第二种有区别,这种情况下，服务器端后台允许OPTIONS请求,并且接口也允许OPTIONS请求,但是头部匹配时出现不匹配现象比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错
注意,一般进行跨域分析的请求都是在ajax请求出现跨域情况的,而且用普通的http请求不会出现问题的

跨域的原理

之所以ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参考浏览器同源政策及其规避方法(阮一峰)

如何解决跨域问题

一般ajax跨域解决就是通过JSONP解决或者CROS解决,如以下(注意,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍)

JSONP方式解决跨域问题

jsonp解决跨域问题是一个比较古老的方案(实际中不推荐使用),这里做简单介绍

实际项目中如果要使用JSONP,一般会使用JQ等对JSONP进行了封装的类库来进行ajax请求

实现原理

JSONP之所以能够用来解决跨域方案,主要是因为 <script> 脚本拥有跨域能力,而JSONP正是利用这一点来实现。具体原理如图

实现流程

JSONP的实现步骤大致如下(参考了来源中的文章)

客户端网页网页通过添加一个<script>元素，向服务器请求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('response data: ' + JSON.stringify(data));

};

请求时,接口地址是作为构建出的脚本标签的src的,这样,当脚本标签构建出来时,最终的src是接口返回的内容

服务端对应的接口在返回参数外面添加函数包裹层
```
foo({

  "test": "testData"

});
					
```
由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。
注意,一般的JSONP接口和普通接口返回数据是有区别的,所以接口如果要做JSONO兼容,需要进行判断是否有对应callback关键字参数,如果有则是JSONP请求,返回JSONP数据,否则返回普通数据

使用注意

基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CROS解决跨域了

CROS解决跨域问题

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

基本上目前所有的浏览器都实现了CORS标准,其实目前几乎所有的浏览器ajax请求都是基于CORS机制的,只不过可能平时前端开发人员并不关心而已(所以说其实现在CROS解决方案主要是考虑后台该如何实现的问题)。

强烈推荐阅读跨域资源共享 CORS 详解(阮一峰)

CROS请求原理

实现原理如下图(简化版本)

如何判断是否是简单请求?
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。只要同时满足以下两大条件，就属于简单请求。
- 请求方法是以下三种方法之一：
  HEAD,GET,POST
- HTTP的头信息不超出以下几种字段：
  Accept,Accept-Language,Content-Language,Last-Event-ID,Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

PHP后台配置

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

第一步:配置Php 后台允许跨域
主要为跨域CROS配置的两大基本信息,Origin和headers
第二步:配置Apache web服务器跨域
一般每一个web服务器安装好都得配置下跨域信息

以上这张图片是在某一个网站上看到的,直接用来。但是具体的源地址已经找不到了...

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>
```
其中版本应该是最新的稳定版本,CROS过滤器

第三步:添加CROS配置到项目的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的)

NET后台配置

.NET后台配置相比前面两者,复杂一点,可以参考如下步骤

第一步:网站配置
打开控制面板，选择管理工具,选择iis;右键单击自己的网站，选择浏览;打开网站所在目录,用记事本打开web.config文件添加下述配置信息,重启网站

请注意,以上截图较老,如果配置仍然出问题,可以考虑增加更多的headers允许,比如
```
"Access-Control-Allow-Headers":"X-Requested-With,Content-Type,Accept"
						
```
或者添加更多的自定义头部
第二步:其它更多配置
如果第一步进行了后,仍然有跨域问题,可能是因为后台的接口没有运行OPTIONS请求的原因,请将[System.Web.Mvc.HttpPost]去掉,让接口支持更多请求

FAQ

multi value ',' 的问题

出现原因

这个问题出现的原因是由于后台响应的http头部信息有两个Access-Control-Allow-Origin:*。常见于.net后台(一般在web.config中配置了一次origin,然后代码中又手动添加了一次origin)
表现现象

如图
解决方法

将代码中手动添加的Origin:*去掉(注意,如果去除config中的配置,会导致跨域问题,只有去除代码中自己加上的才行...)

秒客网

ajax跨域原理以及解决方案

说明

前言

参考来源

什么是跨域

ajax跨域的表现

跨域的原理

如何解决跨域问题

JSONP方式解决跨域问题

实现原理

实现流程

使用注意

CROS解决跨域问题

CROS请求原理

PHP后台配置

JAVA后台配置

NET后台配置

FAQ

multi value ',' 的问题

出现原因

表现现象

解决方法

相关文章

ajax跨域原理以及解决方案

说明

前言

参考来源

什么是跨域

ajax跨域的表现

跨域的原理

如何解决跨域问题

JSONP方式解决跨域问题

实现原理

实现流程

使用注意

CROS解决跨域问题

CROS请求原理

PHP后台配置

JAVA后台配置

NET后台配置

FAQ

multi value '*,*' 的问题

出现原因

表现现象

解决方法

相关文章

multi value ',' 的问题