如何解决跨源 AJAX 请求中的'Access-Control-Allow-Origin 不允许来源”错误？

问题：“Origin is Not allowed by Access-Control-Allow-Origin”

使用 JavaScript 执行跨域 AJAX 请求时，可能会遇到以下错误：

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

出现此错误是由于“同源策略”，这是浏览器中实现的一项安全功能，用于防止恶意脚本访问其他域的数据。

原因

“同源策略”将 AJAX 请求限制为与原始页面相同的域、协议和端口。如果您的 JavaScript 托管在与您尝试访问的服务器不同的域、协议或端口上，则该请求将被阻止。

解决方案：JSONP

要规避“相同” Origin Policy”，一种常见的解决方案是使用 JSONP（带有 Padding 的 JSON）。 JSONP 允许您通过将响应包装在您自己的 JavaScript 中定义的回调函数中来发出跨源请求。

以下是 JSONP 的工作原理：

1. 定义一个回调函数您的 JavaScript。
2. 发送 URL 以 ?callback={callback_function_name} 结尾的 AJAX 请求。
3. 服务器使用回调函数中包含的 JSON 数据进行响应。
4. 执行回调函数，接收响应数据。

示例

要解决给定代码中的错误（尝试向 YouTube 发出跨域 POST 请求），您可以按如下方式使用 JSONP：

<code class="javascript">var script = document.createElement('script');
script.src = "http://gdata.youtube.com/action/GetUploadToken?callback=callbackFunction";
document.head.appendChild(script);

function callbackFunction(data) {
    // Use the response data
}</code>

在此示例中，callbackFunction 是您自己的 JavaScript 中定义的函数，它将接收来自 YouTube 的响应作为参数。

注意: 确保您向其发送请求的服务器支持 JSONP 并且在 URL 中使用正确的回调函数名称非常重要。

以上是如何解决跨源 AJAX 请求中的'Access-Control-Allow-Origin 不允许来源”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！