jquery - 跨域 AJAX 请求不起作用

Question

我正在通过 jQuery 的 $.ajax 函数在我一直使用的第三方 API 上调用 POST。但是，当我调用电话时，我收到以下错误: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.
我从 this post 看到这可能是一个 Webkit 错误，所以我在 Firefox 中尝试了它(我正在使用 Chrome 进行开发)，我得到了相同的结果。我在 Chrome 和 Firefox 上尝试了这个，我得到了相同的结果。

根据 this post ，我也尝试通过设置 crossDomain 来使用 jsonp $.ajax 函数的属性为 true并设置 dataType至jsonp .但是，这会导致 500 内部服务器错误。

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

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

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

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

Answer 1

对于你的第一个问题，

What can I do to make this cross-domain request?

以下请求 header 首先发送到服务器。基于响应 header ，当 header 不相加时，UserAgent(即此处的浏览器)将丢弃响应(如果有)并且不将其返回给 XHR 回调。
Origin: http://yourdomain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header
然后，您的服务器应使用以下 header 进行响应:
Access-Control-Allow-Origin: http://yourdomain.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header
示例取自 - https://stackoverflow.com/a/8689332/1304559

您可以使用 Fiddler 或 Web Inspector 网络选项卡 (Chrome) 或 Firebug 的网络选项卡等工具来查找服务器为响应您的请求而发回的 header 。

第三方 API 服务器 url 应返回支持的值。如果不是，那是你的问题。

正如它所说 对 JsonP 500 服务器错误没有多大帮助内部服务器错误

更新

我看到了你的屏幕截图，这里有几点需要注意

HTTP POST使用

没有 Access-Control在两种模式响应中找到的 header 。第二个状态码为 302

Origin请求头是 null , 所以我相信 HTML 文件是从文件系统而不是从网站打开的

启用 JSONP

说到为什么 JSONP 不工作，原因 - Web 服务配置(指定的 ASMX)没有启用 GET请求的模式。 JSONP 不适用于 POST .

为什么200禁用安全性？

POST 请求直接调用，没有 OPTIONS或在它之前触发预检请求，因此服务器只是响应。

为什么302启用安全性的状态代码？

首先介绍一下未禁用安全标志(默认)时它是如何发生的。 OPTIONS请求被触发到 URL。 URL 应该返回一个可以使用的 HTTP 方法列表，即 GET , POST等。这个 OPTIONS的状态码请求应该是 200 .

在当前情况下，执行此操作时会调用重定向。并且重定向指向 HTTP 服务器错误的自定义错误处理程序。我相信是 404错误，正在被捕获和重定向。[这可能是因为自定义处理程序设置为 ResponseRedirect而不是 ResponseRewrite ] 404的原因|是没有启用跨域访问。

如果自定义错误处理被关闭，这将返回 HTTP 500代码。我相信可以通过在触发跨域请求后立即检查服务器日志来找到问题。如果有的话，最好检查服务器日志中是否有除此之外的错误。

可能的解决方案

要启用访问，有两种方法 - detailed here .或者直接将访问控制头添加到 web.config文件的 customheaders部分。

启用跨域访问后，服务器应响应 OPTIONS 并允许请求通过。这应该返回 HTTP 200除非有其他错误。但是 ajax 回调将无法访问响应。仅当 Access-Control-Allow-Origin设置为“*”或 Origin请求头值和 Access-Control如所须。 ajax 回调将按预期接收响应。

第三点，null Origin .如果 Origin请求 header 值以 Access-Control-Allow-Origin 形式返回.但我假设您会将 HTML 页面移动到 Web 服务器，所以这应该不是问题。

希望这可以帮助!