在前端开发中，我们经常需要通过 Ajax 请求获取数据。其中，jQuery 的 $.getJSON() 方法在进行跨域请求时，可能会出现 Access-Control-Allow-Origin 错误。本文将详细介绍这个问题的原因和解决方法，并提供示例代码。
问题描述
当使用 $.getJSON() 方法请求远程数据时，如果所请求的服务器与当前页面的域名不一致，那么就会触发浏览器的同源策略。如果远程服务器没有设置正确的 CORS 响应头信息，就会导致请求失败，并在浏览器控制台中出现类似以下的错误提示：
-------------- ------ ---- ---------------------------- -- ----------------------------- ------ -- ------- -- --- --------- --------- ------ ----------------------- -- --------- --- ------- -------
这是因为浏览器会检查响应头中是否包含了 Access-Control-Allow-Origin 字段，以判断是否允许当前页面的域名进行跨域请求。如果远程服务器没有设置此字段，或者设置的值不包括当前页面的域名，就会出现以上的错误提示。
解决方法
要解决这个问题，可以从两个方面入手：一是在客户端代码中修改请求头，二是在服务端代码中添加响应头。
修改请求头
在 jQuery 中，可以通过设置 $.ajax() 方法的 xhrFields 属性，来修改请求头信息。具体来说，可以在发送 AJAX 请求前，先获取到 jQuery 生成的 XMLHttpRequest 对象，然后在其中添加必要的请求头字段，如下所示：
--------
---- ------------------------------
----- ------
--------- -------
---------- -
---------------- ----
--
----------- ------------- -
------------------------------------- ------- -----------
--
-------- -------------- -
------------------
--
------ ------------- ----------- ------------ -
------------------------------
-
---以上代码中，我们通过 xhrFields 属性设置了允许跨域请求携带凭证（即 Cookie 等敏感信息），并在 beforeSend 回调函数中添加了一个自定义的 Authorization 头字段。
添加响应头
在服务端代码中，可以通过设置响应头来解决此问题。具体来说，需要在服务器端返回的响应头中添加 Access-Control-Allow-Origin: * 字段，表示允许任意域名进行跨域请求。如果只想允许特定域名进行跨域请求，也可以将 * 替换成对应的域名。
以下是 PHP 代码示例，用于在服务器端添加响应头：
------------------------------------ ---- ---- -------------------
实战示例
以下代码演示了如何使用 $.getJSON() 方法获取远程 JSON 数据，并处理跨域请求：
---------------------------------------- -------------- -
------------------
--
---------------- -
-------------------- ------------
--
--------------------- ----------- ------------ -
--------------------------------
---总结
在前端开发中，使用 jQuery 的 $.getJSON() 方法进行跨域请求时，可能会出现 Access-Control-Allow-Origin 错误。要解决这个问题，可以通过修改客户端请求头或者在服务端添加响应头来实现。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28831