【jQuery+AJAX】Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS policy.

问题描述

jQuery发起跨域Ajax请求,无法获得返回数据,控制台报错。

【jQuery+AJAX】Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS policy._第1张图片

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字段,浏览器会拦截请求,导致无法获取返回数据。


解决方案

1. 服务器配置CORS

在服务器端,可以通过设置响应头的Access-Control-Allow-Origin字段来允许指定的域名进行跨域请求。例如,如果我们希望允许所有域名进行跨域请求,可以设置该字段的值为*

示例代码如下:

header('Access-Control-Allow-Origin: *');

请注意,这种方式存在安全风险,因为允许所有域名进行跨域请求可能导致潜在的安全问题。因此,建议根据实际需求,仅允许信任的域名进行跨域请求。

2. 使用代理服务器

如果服务器不支持CORS配置,或者我们无法修改服务器配置,可以考虑使用代理服务器来解决跨域问题。通过在同一域名下设置一个代理服务器,将请求发送给目标服务器,并将响应返回给客户端,从而避免了浏览器的跨域限制。

示例代码如下:

$.ajax({
  url: '/proxy', // 代理服务器地址
  type: 'GET',
  data: {
    url: 'http://xxx' // 目标服务器地址
  },
  success: function(response) {
    // 处理响应数据
  },
  error: function(xhr, status, error) {
    // 处理错误信息
  }
});

在代理服务器中,根据请求中的url参数,将请求发送给目标服务器,并将响应返回给客户端。

3. JSONP

如果目标服务器不支持CORS,也无法使用代理服务器,我们可以考虑使用JSONP(JSON with Padding)来进行跨域请求。JSONP利用了

你可能感兴趣的:(jQuery,jquery,ajax,okhttp)