Ajax调用API接口跨域报错

当使用Ajax调用API接口时遇到跨域错误,可通过两种方式解决:1. 设置dataType为jsonp;2. 在PHP接口脚本中添加允许跨域的HTTP头。Jsonp是一种跨域数据交互协议,允许网页从其他域名获取数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

错误描述:

在使用ajax调用api接口的时候,报错如下:

Access to XMLHttpRequest at 'http://xxx.com/api/xxx' fromorigin 'null' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

错误代码如下:

$(function() {
	$.post('http://xxx.com/api/xxx', {}, function(res) {
		console.log(res.data)
	});
});

错误形成分析:

资源跨域问题

解决方案:

方法一:

ajax包括GET和POST请求,dataType要写jsonp格式。

$(function() {
	$.ajax({
		url: 'http://xxx.com/api/xxx',
		type: 'POST',
		dataType: 'jsonp', // 跨域读取数据
		success: function(res) {
			console.log(res)
		}
	});
});

方法二:

在php接口的脚本中加入

header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问

header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

路径:
在这里插入图片描述
操作:
1、在class类上面加上

header("Access-Control-Allow-Methods: GET, POST");
header('Access-Control-Allow-Origin: *');

2、把初始化操作的第一句代码注释掉,不进行判断,如下图所示:

总结:

Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

具体参考:

https://www.runoob.com/json/json-jsonp.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值