【问题解决】XMLHttpRequest cannot load http://xxx.xxx No 'Access-Control-Allow-Origin'

最新推荐文章于 2025-03-13 16:32:22 发布

原创最新推荐文章于 2025-03-13 16:32:22 发布 · 4.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#xmlhttprequest #jquery #javascript

问题解决同时被 2 个专栏收录

15 篇文章

订阅专栏

前端

5 篇文章

订阅专栏

本文介绍了两种解决Ajax跨域问题的方法：一是通过jsonp方式利用回调函数实现跨域数据交互；二是利用CORS Proxy进行请求转发，实现跨域访问。

问题描述："XMLHttpRequest cannot load http://xxx.xxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access."/xxx.html (0)

出现原因：ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器处于安全考虑，不允许js代码进行跨域操作，所以会出现这个错误

解决方法：

方案一.一般jQuery解决跨域是通过jsonp的方式，添加callback=xxx，服务器返回xxx(...)，这种方式需要服务器代码帮忙

举个栗子：在index.html中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var url = "jsonp.php?num1=1&num2=2&callbackname=jsonp_callback"; //访问localhost下的jsonp.php
			    var scriptTag = document.createElement("script");   //创建一个script标签
			    scriptTag.setAttribute("src",url);  //设置script的src属性
			    document.body.appendChild(scriptTag);   //将script标签添加到body中
			   
			});
			 //回调函数
		    var jsonp_callback = function(resultObj){
		        $("#res").text(resultObj);
		    }
		</script>
	</head>
	<body>
		<p id="res"></p>
	</body>
</html>

jsonp.php

<?php 
$num1= $_GET["num1"];
$num2= $_GET["num2"];
$result = $num1 + $num2;
$callbackname = $_GET["callbackname"];    //回调函数名称
echo "$callbackname($result)";
?>

最终index.html中显示 3

方案二.通过CORS(跨域资源共享） Proxy 对请求进行转发，就可以实现跨域访问。

如：请求地址是 http://op.juhe.cn/onebox/weather/query?key=3611a1e75f91ff1544fc9f84ec489021&dtype=json&cityname=武汉

则修改为跨域服务器地址/ http://op.juhe.cn/onebox/weather/query?key=3611a1e75f91ff1544fc9f84ec489021&dtype=json&cityname=武汉

(例如：http://proxy.e12e.com/? http://op.juhe.cn/onebox/weather/query?key=3611a1e75f91ff1544fc9f84ec489021&dtype=json&cityname=武汉)这样就可以很方便使用代理的方式来访问api接口了