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

本文链接：https://blog.csdn.net/qq_34988204/article/details/134763602

问题描述

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

解决方案

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利用了<script>标签可以跨域加载资源的特性，通过动态创建<script>标签，并指定目标服务器的接口地址，将返回的数据作为参数传递给指定的回调函数。

示例代码如下：

function handleResponse(response) {
  // 处理响应数据
}

var script = document.createElement('script');
script.src = 'http://xxx?callback=handleResponse'; // 目标服务器接口地址，并指定回调函数
document.head.appendChild(script);