You are here
解决Ajax跨域问题：Origin xx is not allowed by Access-Control-Allow-Origin. 有大用 有大用
自己亲自做的例子 有大用
从发送请求的jquery
$(document).ready(function() {
$("#popbaoming input[type='submit']").click(function(){
$.ajax({
type:'GET', //好像可以不加
url: "http://example.com/example.php",
cache: false,
dataType:'JSONP',
jsonp:'callback',
data: {"tel" : $('#tel').val()}, //好像这里只能放一下参数 换句话说用
data: {"tel" : $('#tel').val(),'name':"aaa"} 是不对的
error: function(){},
success: function(result){
//这里面 与 普通的 ajax一样 获取 result.键名 就是返回过来json值
}
});
});
});
//还有另一种方法 ,可放多个参数
$(document).ready(function() {
$('.ddddd').click(function(){
var nameValue = "AAAAA";
var telValue = "123456789";
$.ajax({
type:"GET",
url: "http://example.com/example.php?tel="+
telValue+"&name="+nameValue,
cache: false,
dataType:'JSONP',
jsonp:'callback',
error: function(){},
success: function(result)
{
//这里面 与 普通的 ajax一样 获取 result.键名 就是返回过来json值
}
});
});
});
接受的http://example.com/example.php
<?php
header("Access-Control-Allow-Origin: *");
//下面 是 $_GET 获取内容的代码
?>
解决Ajax跨域问题：Origin xx is not allowed by Access-Control-Allow-Origin.
今天一个Ajax跨域问题，纠结我半天，记录之。
<html>
<head>
<title>title</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$.ajax({
url:"http://map.yanue.net/gpsApi.php?lat=22.502412986242&lng=113.93832783228",
type:'GET',
success: function(data){
$('body').append( "Name: " + data );
}
});
</script>
</head>
<body>
测试Ajax跨域问题
</body>
</html>
没有结果，chrome用F12 下查看错误 得知：XMLHttpRequest cannot load http://map.yanue.net/gpsApi.php?lat=22.502412986242&lng=113.93832783228. Origin http://localhost is not allowed by Access-Control-Allow-Origin. AJAX跨域问题产生。
搜了好久，得知解决方案：
下面 两步 一步都不能少 否则会出问题
一：使用jsonp格式， 如jquery中ajax请求参数 dataType:'JSONP'。
<html>
<head>
<title>title</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$.ajax({
url:"http://map.yanue.net/gpsApi.php?lat=22.502412986242&lng=113.93832783228",
type:'GET',
dataType:'JSONP',
success: function(data){
$('body').append( "Name: " + data );
}
});
</script>
</head>
<body>
测试Ajax跨域问题
</body>
</html>
二，server端加上header设为 Access-Control-Allow-Origin：*
header("Access-Control-Allow-Origin: *"); # 跨域处理
问题就解决了。
来自 http://yanue.net/post-130.html
自定义Access-Control-Allow-Origin策略以解决字体文件跨域权限问题
什么是Access-Control-Allow-Origin
Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header，用来解决资源（比如字体）的跨域权限问题。
它定义了该资源允许被哪个域引用，或者被所有域引用（google字体使用*表示字体资源允许被所有域引用）。
什么是资源跨域权限
当两个域具有相同的协议(如http), 相同的端口(如80)，相同的host（如www.example.org)，那么我们就可以认为它们是相同的域。
比如http://www.example.org/和http://www.example.org/sub/是同域，而http://www.example.org, https://www.example.org, http://www.example.org:8080, http://sub.example.org中的任何两个都将构成跨域。
例如www.a.com对www.b.com下的asset.php发送了一个跨域的HTTP请求，那么asset.php必须加入如下的响应头：
header(“Access-Control-Allow-Origin: http://www.a.com”);
坑爹的是，该域值不可为正则表达式，如http://*.a.com<h2>如果HTML和CSS等资源所在的CDN不一致，就会出现跨域访问，而这在大型网站中是很常见的</h2> HTML域： http://ctc.qzs.qq.com/ 【等】
CSS域： http://ctc.qzonestyle.gtimg.cn 【等】
字体与CSS是相对路径所以同域： http://ctc.qzonestyle.gtimg.cn 但是HTML与字体是跨域！
高级浏览器访问html页面的时候，对于CSS文件中使用的字体文件的请求，会带一个origin:头，这个头就是html页面所在的域。
高级浏览器（Firefox，IE9+）会对比自己发出的Request header中的Origin:和返回字体文件的Response header的Access-Control-Allow-Origin:域
若相同，则表示该网站有权限使用该字体，浏览器显示字体
若不同，则表示该网站无权使用该字体，浏览器虽然下载了该字体，但拒绝显示
解决办法1
对于字体文件的Request，全部在返回头中加入：
Access-Control-Allow-Origin:*
缺点：安全性问题
解决办法2
根据Request Headers的内容，决定一些需要的Response Headers的内容，这里定义规则如下：
根据Request的Origin: 进行决策，
在Origin来自
*.qq.com（包括www.qq.com; qq.com;）时;
Response Header中增加Access-Control-Allow-Origin:头
头的内容保持和Requset Headers中的Origin: 头URI中的protocol, domainname, port内容，并一致
来自 http://yuguo.us/weblog/access-control-allow-origin/