跨域 AJAX 请求不起作用

问题描述

我正在通过 jQuery 的 $.ajax 函数在我一直使用的第三方 API 上调用 POST.但是，当我拨打电话时，我收到以下错误:XMLHttpRequest 无法加载 http://the-url.com.该请求被重定向到http://the-url.com/anotherlocation"，这对于需要预检的跨域请求是不允许的.

I'm calling POST on a third-party API that I've been working with via jQuery's $.ajax function. However, when I make the call I get the following error: XMLHttpRequest cannot load http://the-url.com. The request was redirected to 'http://the-url.com/anotherlocation', which is disallowed for cross-origin requests that require preflight.

我从 这篇文章中看到 这可能是一个 Webkit 错误，所以我在 Firefox 中进行了尝试(我正在 Chrome 中开发)，我得到了相同的结果.我在 Chrome 和 Firefox 上尝试过，我得到了相同的结果.

I saw from this post that this might be a Webkit bug, so I tried it in Firefox (I'm developing in Chrome) and I got the same result.I've tried this on Chrome and Firefox and I get the same result.

根据 这篇文章，我还尝试通过设置 crossDomain 来使用 jsonp$.ajax 函数的 属性为 true 并将 dataType 设置为 jsonp.但是，这导致了 500 内部服务器错误.

Per this post, I also tried using jsonp both by setting the crossDomain property of the $.ajax function to true and setting the dataType to jsonp. But, this caused a 500 internal server error.

当我使用 --disable-web-security 标志启动 Chrome 时，我没有任何问题.但是，如果我正常启动浏览器，则会收到错误消息.

When I start Chrome with the --disable-web-security flag, I don't have any problems. However, if I start the browser normally, then I get the error.

所以，我想这可能是一个由两部分组成的问题.我该怎么做才能发出这个跨域请求?如果 JSONP 是答案，那么我该如何确定第三方 API 是否设置正确以支持此功能?

So, I guess this might sort of be a 2-part question. What can I do to make this cross-domain request? If JSONP is the answer, then how do I go about figuring out if the third-party API is set up correctly to support this?

这是我在禁用浏览器安全性的情况下拨打电话时的屏幕截图:https://drive.google.com/file/d/0Bzo7loNBQcmjUjk5YWNWLXM2SVE/edit?usp=sharing

Here's the screenshot when I make the call with the browser security disabled: https://drive.google.com/file/d/0Bzo7loNBQcmjUjk5YWNWLXM2SVE/edit?usp=sharing

这是我在启用浏览器安全性的情况下(正常情况下)拨打电话时的屏幕截图:https://drive.google.com/file/d/0Bzo7loNBQcmjam5NQ3BKWUluRE0/edit?usp=sharing

Here's the screenchost when I make the call with the browser security enabled (like normal): https://drive.google.com/file/d/0Bzo7loNBQcmjam5NQ3BKWUluRE0/edit?usp=sharing

推荐答案

我想出的解决方案是使用 cURL(正如 @waki 所提到的)，但稍微修改了一个支持 SOAP 的版本.然后，我没有对第三方 API 进行 AJAX 调用(配置不正确)，而是调用我的本地 PHP 文件，该文件然后对第三方 API 进行 SOAP 调用并将数据传递回我的 PHP 文件，我可以然后处理它.这让我忘记了 CORS 以及与之相关的所有复杂性.这是代码(取自this问题，但没有经过身份验证).

The solution that I came up with was to use cURL (as @waki mentioned), but a slightly modified version that supports SOAP. Then, instead of making the AJAX call to the third party API (which is configured incorrectly) I make the call to my local PHP file which then makes a SOAP call to third party API and passes the data back to my PHP file where I can then process it. This allows me to forget about CORS and all of the complexities associated with it. Here's the code (taken and modified from this question, but without the authentication).

$post_data = "Some xml here";
$soapUrl = "http://yoursite.com/soap.asmx"; // asmx URL of WSDL


$headers = array(
    "Content-type: text/xml;charset="utf-8"",
    "Accept: text/xml",
    "Cache-Control: no-cache",
    "Pragma: no-cache",
    "SOAPAction: http://yoursite.com/SOAPAction",
    "Content-length: " . strlen($post_data),
); //SOAPAction: your op URL

$url = $soapUrl;

// PHP cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data); // the SOAP request
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$response = curl_exec($ch);

/* Check for an error when processing the request. */
if(curl_errno($ch) != 0) {
   // TODO handle the error
}

curl_close($ch);

// TODO Parse and process the $response variable (returned as XML)

这篇关于跨域 AJAX 请求不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！