jQuery发起跨域Ajax请求,无法获得返回数据,控制台报错。
Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
根据报错信息,我们可以得知是由于CORS(跨域资源共享)策略导致的问题。当浏览器发起跨域请求时,如果服务器没有正确设置响应头中的Access-Control-Allow-Origin
字段,浏览器会拦截请求,导致无法获取返回数据。
在服务器端,可以通过设置响应头的Access-Control-Allow-Origin
字段来允许指定的域名进行跨域请求。例如,如果我们希望允许所有域名进行跨域请求,可以设置该字段的值为*
。
示例代码如下:
header('Access-Control-Allow-Origin: *');
请注意,这种方式存在安全风险,因为允许所有域名进行跨域请求可能导致潜在的安全问题。因此,建议根据实际需求,仅允许信任的域名进行跨域请求。
如果服务器不支持CORS配置,或者我们无法修改服务器配置,可以考虑使用代理服务器来解决跨域问题。通过在同一域名下设置一个代理服务器,将请求发送给目标服务器,并将响应返回给客户端,从而避免了浏览器的跨域限制。
示例代码如下:
$.ajax({
url: '/proxy', // 代理服务器地址
type: 'GET',
data: {
url: 'http://xxx' // 目标服务器地址
},
success: function(response) {
// 处理响应数据
},
error: function(xhr, status, error) {
// 处理错误信息
}
});
在代理服务器中,根据请求中的url
参数,将请求发送给目标服务器,并将响应返回给客户端。
如果目标服务器不支持CORS,也无法使用代理服务器,我们可以考虑使用JSONP(JSON with Padding)来进行跨域请求。JSONP利用了标签可以跨域加载资源的特性,通过动态创建
标签,并指定目标服务器的接口地址,将返回的数据作为参数传递给指定的回调函数。
示例代码如下:
function handleResponse(response) {
// 处理响应数据
}
var script = document.createElement('script');
script.src = 'http://xxx?callback=handleResponse'; // 目标服务器接口地址,并指定回调函数
document.head.appendChild(script);
在上面的代码中,通过动态创建标签,并指定目标服务器的接口地址,并在接口地址中通过
callback
参数指定回调函数的名称。当目标服务器返回数据时,会将数据作为参数传递给指定的回调函数,从而实现跨域请求。
注意:目标服务器的接口地址需要支持JSONP请求,即在返回数据时将数据包装在指定的回调函数中。
如果以上方法都无法解决跨域问题,我们可以考虑使用一些浏览器插件来禁用CORS限制,例如在Chrome浏览器中可以使用 “Allow CORS: Access-Control-Allow-Origin” 插件。这样可以绕过浏览器的跨域限制,但同样需要注意安全问题。
根据具体情况,选择适合的解决方案来解决跨域问题。如果我们有权限修改服务器配置,建议使用第一种方法;如果无法修改服务器配置,可以考虑使用代理服务器或JSONP;如果以上方法都不可行,可以考虑使用CORS插件来禁用浏览器的跨域限制。