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

问题描述:"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接口了

### 解决CORS策略阻止XMLHttpRequest访问的问题 当遇到 `CORS policy` 导致的 `XMLHttpRequest` 访问被拒绝问题时,通常是由于服务器端未正确设置跨域资源共享(CORS)的相关响应头所致。以下是可能的原因以及解决方案: #### 原因分析 1. **缺少必要的 CORS 头部** 如果服务器未返回 `Access-Control-Allow-Origin` 字段,则客户端会认为该资源不允许跨域访问[^1]。 2. **预检请求失败** 对于复杂请求(如使用自定义头部或非安全方法),浏览器会在实际请求之前发送一个 `OPTIONS` 请求作为预检请求。如果服务器未能正确处理此请求并返回相应的 CORS 响应头(如 `Access-Control-Allow-Methods`, `Access-Control-Allow-Headers`),则会导致请求失败[^3]。 3. **跨域读取保护 (CORB)** 即使服务器配置了不恰当的 CORS 设置,现代浏览器中的 CORB 机制仍可能会拦截某些类型的跨域数据加载尝试,特别是涉及敏感文件格式的情况[^2]。 #### 解决方案 为了成功实现跨域请求,可以从以下几个方面入手调整服务端配置: 1. **明确指定允许的源** 将 `Access-Control-Allow-Origin` 设定为具体的域名而非通配符 (`*`) 是更安全的做法。例如: ```http Access-Control-Allow-Origin: http://example.com ``` 2. **支持预检请求** 当面对需要额外验证逻辑的非简单请求时,确保服务器能够妥善应对 `OPTIONS` 方法发起的预检请求,并提供如下关键头部信息: - 列举可接受的方法列表: ```http Access-Control-Allow-Methods: GET, POST, PUT, DELETE ``` - 定义哪些自定义头部是可以被使用的: ```http Access-Control-Allow-Headers: Content-Type, Authorization ``` 3. **增加缓存控制提高效率** 可通过设定较长的有效期来减少频繁重复的预检操作次数,从而优化性能表现: ```http Access-Control-Max-Age: 86400 ``` 4. **启用凭证模式下的跨域通信** 若希望携带认证信息(比如 Cookies 或者 Token),还需特别注意开启相应选项并在服务端声明许可状态: ```javascript xhr.withCredentials = true; ``` 同步更新服务器侧规则以接纳此类情况: ```http Access-Control-Allow-Credentials: true ``` 5. **采用 HTTPS 提升安全性** 敏感接口建议仅限加密连接下运行,并强化来源验证流程,防止潜在的安全隐患发生[^2]。 ```python from flask import Flask, jsonify, make_response app = Flask(__name__) @app.route('/data') def data(): resp = make_response(jsonify({'key': 'value'})) resp.headers['Access-Control-Allow-Origin'] = 'https://trusted-site.example' resp.headers['Access-Control-Allow-Methods'] = 'GET,POST' resp.headers['Access-Control-Allow-Headers'] = 'Content-Type' resp.headers['Access-Control-Allow-Credentials'] = 'true' return resp ``` 以上代码片段展示了如何利用 Python 的 Flask 框架构建具备适当 CORS 支持的服务端点实例。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值