php如何解决跨域问题题

来源：蜘蛛抓取(WebSpider) 时间：2016-05-08 04:31 标签： css盒子模型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&输入关键字或相关内容进行搜索
1、我后台使用C#发布了一个webservice。
2、在pc端使用ajax jsonp可以访问。
3、在移动端使用zepto使用同样的代码则无法解决。请教下，谢谢！！！
你确定你的webservice
jsonp可以了。你用jquery的再试试
在5+客户端内，mui.ajax支持直接跨域访问html,json,xml,text，目前暂不支持jsonp
请问楼主最后怎么样了？问题解决了吗？
我的是通过设置服务器来解决的
楼主 解决出出来告诉大家一声
我的问题已经解决后台代码如下：
public static void reSponseJson(String string,HttpServletResponse response) {
response.setContentType(&text/ charset=utf-8&);
response.setHeader(&Access-Control-Allow-Origin&, &&);
response.setHeader(&Access-Control-Allow-Headers&, &X-Requested-With&);
response.setHeader(&Cache-Control&, &no-cache&);
PrintWriter out =
out = response.getWriter();
out.print(string);
out.flush();
} catch (IOException e) {
e.printStackTrace();
} finally {
out.close();
ajax 代码如下：
var url = &http://192.168.1.100/lpAppService/JobMngController.do?action=jobListForPage&;
mui.ajax(url, {
rows: rows,
page: page
//dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 1000, //超时时间设置为10秒；
success: function(data) {
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(type);
问题出在：一定要在head里面加上
&meta http-equiv=&Access-Control-Allow-Origin& content=&&&
&meta http-equiv=&content-security-policy&&head里面的内容如下：
&meta charset=&utf-8&&
&title&Hello MUI&/title&
&meta http-equiv=&Access-Control-Allow-Origin& content=&*&&
&meta http-equiv=&content-security-policy&&
&meta name=&viewport& content=&width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no&&
&meta name=&apple-mobile-web-app-capable& content=&yes&&
&meta name=&apple-mobile-web-app-status-bar-style& content=&black&&
要回复问题请先或
浏览: 7112
关注: 7 人产生跨域问题的原因
跨域问题是浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。
跨域问题产生的场景
当要在在页面中使用js获取其他网站的数据时，就会产生跨域问题，比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口时以及hybrid app中请求数据，浏览器就会提示以下错误。这种场景下就要解决js的跨域问题。
XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is therefore not allowed access.
哪些情况会产生跨域问题
一个网站的网址组成包括协议名，子域名，主域名，端口号。比如
，其中https是协议名，www是子域名，github是主域名，端口号是80，当在在页面中从一个url请求数据时，如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同，就会产生跨域问题。
即使是在 http://localhost:80/ 页面请求 http://127.0.0.1:80/ 也会有跨域问题
解决跨域问题
解决跨域问题有以下一种方式
服务端代理
服务端设置Request Header头中Access-Control-Allow-Origin为指定可获取数据的域名
jsonp的解决方式
json≠jsonp
jsonp解决跨域问题的原理是，浏览器的script标签是不受同源策略限制(你可以在你的网页中设置script的src属性问cdn服务器中静态文件的路径)。那么就可以使用script标签从服务器获取数据，请求时添加一个参数为callbakc=?，?号时你要执行的回调方法。
以jQuery2.1.3的ajax方法为例
javascript$.ajax({
dataType:"jsonp",
}).done(function(data){
//dosomething..
仅仅是客户端使用jsonp请求数据是不行的，因为jsonp的请求是放在script标签中的，和普通请求不同的地方在于，它请求到的是一段js代码，如果服务端返回了json字符串，那么浏览器就会报错。所以jsonp返回数据需要服务端做一些处理。
服务端返回数据处理
上面说了jsonp的原理是利用script标签来解决跨域，但是script标签是用来获取js代码的，那么我们怎么获取到请求的数据呢。
这就需要服务端做一些判断，当参数中带有callback属性时，返回的type要为application/javascript,把数据作为callback的参数执行。下面是jsonp返回的数据的格式示例
javascript/**/ typeof jQuery === 'function' && jQuery({"code":1,"msg":"success","data":{"test":"test"}});
这是express4.12.3关于jsonp的实现代码
javascript
if (typeof callback === 'string' && callback.length !== 0) {
this.charset = 'utf-8';
this.set('X-Content-Type-Options', 'nosniff');
this.set('Content-Type', 'text/javascript');
// restrict callback charset
callback = callback.replace(/[^\[\]\w$.]/g, '');
// replace chars not allowed in JavaScript that are in JSON
body = body
.replace(/\u2028/g, '\\u2028')
.replace(/\u2029/g, '\\u2029');
// the /**/ is a specific security mitigation for "Rosetta Flash JSONP abuse"
// the typeof check is just to reduce client error noise
body = '/**/ typeof ' + callback + ' === \'function\' && ' + callback + '(' + body + ');';
服务端设置Access-Control-Allow-Origin
这种方式只要服务端把response的header头中设置Access-Control-Allow-Origin为制定可请求当前域名下数据的域名即可。一般情况下设为即可。这样客户端就不需要使用jsonp来获取数据。
关于Access-Control-Allow-Origin设为是否会有安全问题，知乎上有个讨论。
浏览器支持
Access-Control-Allow-Origin是html5新增的一项标准，IE10以下是不支持的，所以如果产品面向的是PC端，就要使用服务端代理或jsonp。
你可能感兴趣的文章
1 收藏，228
6 收藏，1.1k
20 收藏，2.4k
本文采用 ，分享、演绎需署名且使用相同方式共享。
本文隶属于专栏
就是懒得写 &(￣ ﹌ ￣)&
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知解决跨域问题，聊聊JSONP
123123123123123123轻松一下(44)12345678910
读过本文章的之前读了
解决跨域问题，聊聊JSONP
阅读：4048&次 &&编辑日期：
跨域这个问题在工作偶尔能够碰到，但是一旦跨域传送数据就成了问题，所以就用到了JSONP，今天我们来聊聊JSONP。
什么是JSONP：
JSONP是一种为了解决跨域的数据交换问题，从而衍生出来的数据交换协议。
为什么会产生JSONP：
因为浏览器的“同源策略“，也就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互，但是在数据交换的过程中，经常会产生跨域的数据交换，所以人们想到了一个方法来解决这个问题，
原因是有一些标签是可以跨域执行的，跨域还能执行的标签例如img，script标签，以大家常用img标签为例，就算是别的网站的图片url在咱们的网站也是可以用的，script标签同理。
为什么不用AJAX：
如果是在本站内，我们用Ajax把数据提交给后台就可以了，但是如果不是在本站呢？跨域无权限访问的。例如，要直接传送数据给是不可以的。
JSON和JSONP的关系：
没有半毛钱关系，JSON是一种数据格式而JSONP是一种跨域的数据交换协议，但是目前为止使用JSONP返回的数据格式最推荐使用JSON。
JSONP的原理：
动态的插入一个&#60;script&#62;标签，这个标签的src链接一个存有数据的、调用本地函数的JS脚本。
JSONP的具体实现方法：
(1) 刚刚已经说过了，JS脚本是可以跨域执行的，比如在页面中插入：
&#60;script type="text/javascript" src="/alert.js"&#62;
&#60;/script&#62;
alert.js文件的代码如下：
function Jsonp(){
alert("uw3c")
那么就算是来自不同网站的JS文件，页面中也绝对会弹出提示框。
(2) 那么，如果我这个插入在页面中的外站的脚本（alert.js）是个调用函数的方法呢？
&#60;script type="text/javascript"&#62;
function Jsonp(){
alert("uw3c")
&#60;/script&#62;
&#60;script type="text/javascript" src="/alert.js"&#62;
&#60;/script&#62;
alert.js文件的代码如下：
就相当于调用了本页面的"Jsonp()"方法。必然会在页面中弹出提示框"uw3c"。
(3) 那么，如果我通过外站的脚本（alert.js）往页面里面传个数据呢？
&#60;script type="text/javascript"&#62;
function Jsonp(obj){
alert(obj)
&#60;/script&#62;
&#60;script type="text/javascript" src="/alert.js"&#62;
&#60;/script&#62;
alert.js文件的代码如下：
Jsonp("uw3c");
我通过外站脚本，调用页面中的“Jsonp”函数，并且传有实参(uw3c)。页面必然也会弹出提示框"uw3c"。
所以，我们就可以通过这种方法来给页面中传入外站的数据，这就是JSONP的基本原理。
但是，大家肯定会问了，这样的确是可以传送数据，但是每个函数的名称都不一样啊，要是给多个网站传数据岂不是也要写多个文件文件？
有点后台基础的同鞋肯定能想到，根据链接中传递的参数动态生成这个文件，用参数告诉后台这个函数叫什么名字不就行了吗：
&#60;script type="text/javascript"&#62;
//本地JS函数
var uw3cJsonp = function(data){
alert('文章名称' + data.name +
'文章分类 ' + data.type);
//提供jsonp服务的url地址,地址中带有参数（name,type）,
//后台经过处理最终生成的返回值是一段javascript代码,
//js文件里面调用函数的名称是uw3cJsonp,
//后台通过参数type=js01，获取参数，然后到数据库中查找，然后返回,
//从而生成了名称为uw3cJsonp，里面带数据的JS调用文件。
var url = "/Jsonp.php?name=uw3cJsonp&type=js01";
//创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
//把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
&#60;/script&#62;
说到这里，应该能理解JSONP的原理了吧，但是有些同鞋平日过度依赖jQuery，看JS有点费劲，那怎么办？
事实证明jQuery的确是个值得依赖的插件：
&#60;script type="text/javascript"&#62;
type: "get",
async: false,
url: "/Jsonp.php?type=js01",
dataType: "jsonp",
//传递给请求处理程序或页面的，
//用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonp: "callback",
//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，
//也可以写"?"，jQuery会自动为你处理数据
jsonpCallback:"uw3cJsonp",
success: function(json){
alert('文章名称' + data.name +
'文章分类 ' + data.type);
error: function(){
alert('传送数据失败');
&#60;/script&#62;
大家注意到了吗，我在AJAX的参数url中并没有写JS函数的名称uw3cJsonp，这是应为jQuery自动给生成了，怎么样，爽吧！
但是大家注意，在jQuery封装的JSONP中，type只能为"get"。
JSONP与AJAX的区别：
虽然jQuery把JSONP封装到了AJAX中，但是JSONP跟AJAX根本不是一回事。
AJAX的是通过XmlHttpRequest获取非本页内容，但是JSONP是通过动态插入script标签用JS获取数据，是有本质区别的。
好了，以上就是本片文章的全部内容，希望可以让大家充分的理解JSONP的功能和原理，以及和AJAX的区别。
将本篇文章分享到：&&原利用代理页面解决html iframe跨域访问网站问题在做项目的时候遇到跨域问题，经过自己的一番摸索终于找到一种解决iframe跨域问题的方案，或许很多人也会遇到这样头疼的问题，希望能尽自己绵薄之力帮助大家。如果不清楚或者有问题的可以留言和私信我，谢谢。【问题描述】& & 在项目中由于许多页面都是连接到其他项目的页面。由菜单连接到其他域页面，再在其他域页面上调用本项目的js用iframe显示其他域的页面，这样就会涉及到安全性问题即跨域问题。报错信息如下浏览器控制台跨域报错信息：Unsafe JavaScript attempt to access frame with URL xxx&from frame with URL xxx&Domains, protocols and ports must match.【分析思路】& & 要想解决问题就必须得还原问题本身，那就是重现问题。对于这个问题我就单独写了两个项目来进行模拟测试，并使用iframe来嵌套调用两个项目的页面，把这两个项目分别放在两个不同端口的tomcat下。由于端口不同所以浏览器就会抛出安全异常即跨域问题。&&& 成功的重现问题后，接下来就是根据错误信息在网上搜寻答案。根据网上给的答案大多数都是设置页面document.domain为同一域，这个方法倒是能解决，但是需要所有页面都这样设置，但在实际项目中往往会有很多页面而无法每个页面都设置，逐放弃之。后来几经琢磨想到了利用代理页面，就好像访问本项目页面一样，再结合之前弄打印页面采用自动创建iframe来加载别的页面(即中间页面/代理页面)，结果通过这种方式还真有效。【具体解决方法】& & &把site1和site2项目分别放在不同端口的tomcat下运行，访问site1的index.html页面，这是入口页面。在site1的index.html页面中用iframe访问显示site2的index.html页面，再通过操作site2的index.html页面调用site1的index.html页面中的方法excute，要调用此方法就要利用到中间代理页面site1中的iframe.html，这个是一个关键页面，因为所有需要跨域的访问都要通过这个页面来调用site1项目中的代码。这样就形成了自己调用自己的代码也就不会出现跨域了。在这个执行过程中site2的index.html页面中的crossFrame方法起到了关键作用，就是通过它来调用代理页面的。项目截图Site1/index.htmlSite2/index.htmlSite1/iframe.html&访问site1/index.html运行截图：参考资料：什么是跨域我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.跨域问题是由于javascript语言安全限制中的同源策略造成的.简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.例如:URL说明是否允许通信/a.js&/b.js同一域名下允许/lab/a.js&/script/b.js同一域名下不同文件夹允许:8000/a.js&/b.js同一域名，不同端口不允许/a.js&/b.js同一域名，不同协议不允许/a.js&http://70.32.92.74/b.js域名和域名对应ip不允许/a.js&/b.js主域相同，子域不同不允许/a.js&http://a.com/b.js同一域名，不同二级域名（同上）不允许（cookie这种情况下也不允许访问）/a.js&/b.js不同域名不允许由编辑于 20:12:036个牛币请下载代码后再发表评论//跨域/跨域/site1/跨域/site1/.classpath/跨域/site1/.project/跨域/site1/.settings/跨域/site1/.settings/.jsdtscope/跨域/site1/.settings/org.eclipse.jdt.core.prefs/跨域/site1/.settings/org.ponent/跨域/site1/.settings/org.mon.project.facet.core.xml/跨域/site1/.settings/org.eclipse.wst.jsdt.ui.superType.container/跨域/site1/.settings/org.eclipse.wst.jsdt.ui.superType.name/跨域/site1/WebContent/跨域/site1/WebContent/iframe.html/跨域/site1/WebContent/index.html精精精原精原精原原精最热搜索分享话题编程语言基础Web开发数据库开发客户端开发脚本工具游戏开发服务器软硬件开源组件类库相关分享精最近下载暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友

我要回帖

更多关于 css盒子模型 的文章

 

随机推荐