GVKun编程网logo

ajax post 跨域访问的解决（ajax跨域请求解决方案）

30

对于想了解ajaxpost跨域访问的解决的读者，本文将是一篇不可错过的文章，我们将详细介绍ajax跨域请求解决方案，并且为您提供关于ajaxpost跨域访问、AJAXpost跨域的解决方法、Ajax跨

对于想了解ajax post 跨域访问的解决的读者，本文将是一篇不可错过的文章，我们将详细介绍ajax跨域请求解决方案，并且为您提供关于ajax post 跨域访问、AJAX post跨域的解决方法、Ajax 跨域访问 Cookie 丢失问题的解决方法、Ajax 跨域访问的三种方法的有价值信息。

本文目录一览：

ajax post 跨域访问的解决（ajax跨域请求解决方案）

ajax post 跨域访问的解决（ajax跨域请求解决方案）

在近期的项目中遇到一个浏览器跨域访问的问题，这个项目是跟第三方厂商合作进行开发，我们负责后台的业务功能实现，而前端页面展示由第三方厂商来实现，为了调试后台的业务接口，我开发过程中按照如下的接口进行调用测试，发现一直出现跨域禁止访问的提示。(注意：开发过程中使用谷歌浏览器)。

请求测试页面：

<!doctype html>
<html lang="en">
<head>
	<Meta charset="UTF-8">
	<!--设置IE浏览器以最新的内核渲染页面-->
	<Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<!--设置视图窗口-->
	<Meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<!--设置电话和邮箱自动识别-->
	<Meta name="format-detection" content="telephone=no">
	<Meta name="format-detection" content="email=no">
	<title>我的视光师</title>
	
</head>
<body>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="zepto.min.js"></script>

<script type="text/javascript">
	
	$.ajax({
		type:"POST",/* 我的主页 -- 编辑Or保存 */
		url:"http://localhost/doctor/employee/maininfoEdit.json",//async: false,// 使用同步方式
		contentType: "application/json; charset=utf-8",dataType: "json",data: JSON.stringify({'mainInfo':{
		 'company': '北医四院','level': '国家一级医师','name': '挺挺','phone': "18257157609",'desc': '北京著名眼科医生'},'employeeId': '1'
		}),success:function(data){
			console.log(data);
		},error:function(data){
			console.log("error");
		}
	})  
	
</script>
	
</body>
</html>
后来参考如下两篇文档进行解决的，在这里分享下供大家参考：

1.http://blog.csdn.net/ziwoods/article/details/51062206
2.http://blog.csdn.net/rapier512/article/details/51506672
注意，在第一篇文章中配置好谷歌浏览器后(--args --disable-web-security --user-data-dir)，首先要先打开谷歌浏览器会出现如下所示的图片：




打开谷歌浏览器后在去打开如上的html页面即可(一定不要直接用谷歌浏览器去打开html页面)。

ajax post 跨域访问

ajax post 跨域访问

 
PHP：
header('Access-Control-Allow-Origin:*'); header('Access-Control-Allow-Methods:POST,GET'); header('Access-Control-Allow-Credentials:true'); 
js:
$.ajax({ type: 'POST', url'https://to.com/postHere.PHP' crossDomain true data'{"some":"json"}' dataType'json' successfunction(responseData textStatus jqXHR) {var value = responseDatasomeKey;},0)"> errorfunction errorThrown alert('POST Failed.');}});

AJAX post跨域的解决方法

AJAX post跨域的解决方法

ajax跨域访问是一个老问题了，解决方法很多，比较常用的是JSONP方法，JSONP方法是一种非官方方法，而且这种方法只支持GET方式，不如POST方式安全。

 

即使使用jquery的jsonp方法，type设为POST，也会自动变为GET。

 

官方问题说明：

“script”: Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter, “_=[TIMESTAMP]“, to the URL unless the cache option is set to true.Note: This will turn POSTs into GETs for remote-domain requests.

 

如果跨域使用POST方式，可以使用创建一个隐藏的iframe来实现，与ajax上传图片原理一样，但这样会比较麻烦。

 

因此，通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。

 

例如：客户端的域名是www.client.com,而请求的域名是www.server.com

如果直接使用ajax访问，会有以下错误

XMLHttpRequest cannot load http://www.server.com/server.php. No ''Access-Control-Allow-Origin'' header is present on the requested resource.Origin ''http://www.client.com'' is therefore not allowed access.

 

在被请求的Response header中加入

 

[php] view plain copy

  1. // 指定允许其他域名访问  
  2. header(''Access-Control-Allow-Origin:*'');  
  3. // 响应类型  
  4. header(''Access-Control-Allow-Methods:POST'');  
  5. // 响应头设置  
  6. header(''Access-Control-Allow-Headers:x-requested-with,content-type'');  

 

就可以实现ajax POST跨域访问了。

 

代码如下：

client.html 路径：http://www.client.com/client.html

 

[html] view plain copy

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3.  <head>  
  4.   <meta http-equiv="content-type" content="text/html;charset=utf-8">  
  5.   <title> 跨域测试 </title>  
  6.   <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  
  7.  </head>  
  8.   
  9.  <body>  
  10.     <div id="show"></div>  
  11.     <script type="text/javascript">  
  12.     $.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"})  
  13.       .done(function(data){  
  14.         document.getElementById("show").innerHTML = data.name + '' '' + data.gender;  
  15.       });  
  16.     </script>  
  17.  </body>  
  18. </html>  


server.php 路径：http://www.server.com/server.php

 

 

[php] view plain copy

  1. <?php  
  2. $ret = array(  
  3.     ''name'' => isset($_POST[''name''])? $_POST[''name''] : '''',  
  4.     ''gender'' => isset($_POST[''gender''])? $_POST[''gender''] : ''''  
  5. );  
  6.   
  7. header(''content-type:application:json;charset=utf8'');  
  8. header(''Access-Control-Allow-Origin:*'');  
  9. header(''Access-Control-Allow-Methods:POST'');  
  10. header(''Access-Control-Allow-Headers:x-requested-with,content-type'');  
  11.   
  12. echo json_encode($ret);  
  13. ?>  


Access-Control-Allow-Origin:* 表示允许任何域名跨域访问

 

如果需要指定某域名才允许跨域访问，只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名

例如：header(''Access-Control-Allow-Origin:http://www.client.com'');

 

如果需要设置多个域名允许访问，这里需要用php处理一下

例如允许 www.client.com 与 www.client2.com 可以跨域访问

server.php 修改为

 

[php] view plain copy

  1. <?php  
  2. $ret = array(  
  3.     ''name'' => isset($_POST[''name''])? $_POST[''name''] : '''',  
  4.     ''gender'' => isset($_POST[''gender''])? $_POST[''gender''] : ''''  
  5. );  
  6.   
  7. header(''content-type:application:json;charset=utf8'');  
  8.   
  9. $origin = isset($_SERVER[''HTTP_ORIGIN''])? $_SERVER[''HTTP_ORIGIN''] : '''';  
  10.   
  11. $allow_origin = array(  
  12.     ''http://www.client.com'',  
  13.     ''http://www.client2.com''  
  14. );  
  15.   
  16. if(in_array($origin, $allow_origin)){  
  17.     header(''Access-Control-Allow-Origin:''.$origin);  
  18.     header(''Access-Control-Allow-Methods:POST'');  
  19.     header(''Access-Control-Allow-Headers:x-requested-with,content-type'');  
  20. }  
  21.   
  22. echo json_encode($ret);  
  23. ?>  

Ajax 跨域访问 Cookie 丢失问题的解决方法

跨域简单的说，就是从一个域名的网页去访问另一个域名网页的资源，下面这篇文章主要给大家介绍了关于 AJAX 的跨域问题解决的相关资料，文中通过实例代码介绍的非常详细，需要的朋友可以参考下

目录

  • 跨域的概述
    • 区别同源与不同源
    • 同源策略有什么用？
  • AJAX 跨域解决方案
    • 方案一、设置响应头
    • 方案二、jsonp
    • 方案三、代理机制（httpclient）
  • 总结

 

跨域的概述

  1. 跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度（https://baidu.com）页面去请求京东（https://www.jd.com）的资源。
  2. 通过超链接、form 表单提交、window.location.href、document.location.href、script 标签、img 标签等方式进行跨域是不存在问题的。但在一个域名的网页中的一段 js 代码发送 AJAX 请求去访问另一个域名中的资源，由于同源策略的存在导致无法跨域访问，AJAX 就存在这种跨域问题。
  3. 同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性，同源就是协议、域名和端口都相同。

下面是使用 AJAX 发送请求跨域访问资源出现的问题：请求的资源上不存在 “访问控制允许源” 标头：（就是被同源策略阻止了）

 

区别同源与不同源

区分同源和不同源的三要素：

协议域名端口

协议一致，域名一致，端口号一致，三要素都要一致，才是同源，其它一律都是不同源。

 

同源策略有什么用？

如果你刚刚在网银输入账号密码，查看了自己还有一万 元块钱，紧接着访问一些不规矩的网站，这个网站可以访问刚刚的网银站点，并且获取账号密码，那后果可想而知。所以，从安全的角度来讲，同源策略是有利于保护网站信息的。

 

AJAX 跨域解决方案

有一些情况下，我们是需要使用 AJAX 进行跨域访问的。比如某公司的 A 页面（a.aresourse.com）有可能需要获取 B 页面（b.bresourse.com）。

 

方案一、设置响应头

核心原理：跨域访问的资源允许你跨域访问。（被调用方允许你可跨域访问）

实现：

response.setHeader("Access-Control-Allow-Origin","http://localhost:8080/ajax/ajax7.html");//允许某个
response.setHeader("Access-Control-Allow-Origin","*");//允许所有

方案二、jsonp

jsonp：json with padding

  • jsonp 不是一个真正的 AJAX 请求。只不过可以完成 AJAX 的局部刷新效果。可以说 jsonp 是一种类 AJAX 请求的机制。

jsonp 可以解决跨域问题。
注意：jsonp 解决跨域的时候，只支持 GET 请求。不支持 post 请求。这是因为 jsonp 本就是动态的创建 script 标签从而达到跨域的效果。

下面是动态创建的代码：

效果展示：

jQuery 封装了 jsonp，也就是说可以使用 jQuery 库去进行编写 jsonp 代码，方便。

核心代码如下：

1
2
3
4
5
6
7
8
$.ajax({
     type: "GET" ,
     url: "跨域的url" ,
     dataType: "jsonp" ,   //指定数据类型
     jsonp: "fun" ,    //指定参数名（不设置的时候，默认是”callback“）
     jsonpCallback: "sayHello"   //指定回调函数的名字，不设置的时候，jQuery会自动生成一个随机的回调函数,
     //并且这个回调函数还会自动调用success的回调函数
})

 

方案三、代理机制（httpclient）

“调用方” 解决跨域的问题是这个思路的：让发送出去的请求代理成是本域的。
如果资源是本域的，那就侧面地进行了跨域。

使用 Java 程序怎么去发送 get/post 请求呢？【GET 和 POST 请求就是 HTTP 请求】

  • 使用 JDK 内置的 API（java.net.URL....），这些 API 是可以发送 HTTP 请求的。
  • 使用第三方的开源组件，比如：apache 的 httpclient 组件。（httpclient 组件是开源免费的，可以直接用）。

 

总结

到此这篇关于 AJAX 的跨域问题解决的文章就介绍到这了，更多相关 AJAX 跨域问题内容请搜索开源中国以前的文章或继续浏览下面的相关文章希望大家以后多多支持 ！

Ajax 跨域访问的三种方法

Ajax 跨域访问的三种方法

一、什么是跨域
我们先回顾一下域名地址的组成：
http:// www . google : 8080 / script/jquery.js
  http:// （协议号）
               www  （子域名）
             google （主域名）
               8080 （端口号）
script/jquery.js （请求的地址）
* 当协议、子域名、主域名、端口号中任意一各不相同时，都算不同的“域”。
* 不同的域之间相互请求资源，就叫“跨域”。
比如：http://www.abc.com/index.html 请求 http://www.def.com/sever.php
二、处理跨域的方法1 -- 代理（这个方法比较“笨” 故不做详细介绍）
比如在北京（www.beijing.com/sever.php）和上海（www.shanghai.com/sever.php）各有一个服务器，北京的后端（www.beijing.com/sever.php）直接访问上海的服务，然后把获取的响应值返回给前端。也就是北京的服务在后台做了一个代理，前端只需要访问北京的服务器也就相当与访问了上海的服务器。这种代理属于后台的技术，所以不展开叙述。
三、处理跨域的方法2 -- JSONP
假设在http://www.aaa.com/index.php这个页面中向http://www.bbb.com/getinfo.php提交GET请求，那么我们在www.aaa.com页面中添加如下代码：

[code ]var eleScript= document.createElement("script"); //创建一个script元素
 
eleScript.type = "text/javascript"; //声明类型、
 
eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src属性 引入跨域访问的url
 
document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素[/code]
当GET请求从http://www.bbb.com/getinfo.php返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用http://www.aaa.com/index.php页面中的一个callback函数。看下面一个列子：
在www.aaa.com页面中：

[code ]&lt;script&gt;
 
　　function jsonp( json ){
 
　　　　document.write( json.name ); //输出周星驰
 
}
 
&lt;script&gt;
 
&lt;script src="http://www.bbb.com/getinfo.php"&gt;&lt;/script&gt;[/code]
在www.bbb.com页面中：
jsonp({ "name":"周星驰","age":45 });
也就是在www.aaa.com页面中声明，在www.bbb.com页面中调用。但是JSONP只支持 “GET” 请求，但不支持 “POST” 请求。
三、处理跨域的方法2 -- XHR2（推荐方法）
“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法，对跨域访问提供了很好的支持，并且还有一些新的功能。
* IE10一下的版本都不支持
* 只需要在服务器端头部加上下面两句代码：
header( "Access-Control-Allow-Origin:*" );
header( "Access-Control-Allow-Methods:POST,GET" );

我们今天的关于ajax post 跨域访问的解决和ajax跨域请求解决方案的分享就到这里，谢谢您的阅读，如果想了解更多关于ajax post 跨域访问、AJAX post跨域的解决方法、Ajax 跨域访问 Cookie 丢失问题的解决方法、Ajax 跨域访问的三种方法的相关信息，可以在本站进行搜索。

本文标签：

上一篇Ajax+juqery+php 之两个select option控件传值（ajax传两个参数到controller）

下一篇sapui5 OPTIONS 请求（sap请求号）

相关文章