Ajax Web服务调用 - 不存在"Access-Control-Allow-Origin"标头

Question

嘿呀,

我知道之前已经问过这个问题,我已经阅读了每个问题的每一个答案,但似乎仍然无法让我的项目正常运行.我的情景与其他问题有点不同,不确定这是否有所不同,但我们走了.

我有一个由Web服务组成的项目.仅服务工作正常,没有问题.还有另一个项目处理事物的UI部分并通过jquery ajax调用这些服务.它一直工作正常,因为我之前没有在Google Chrome上测试过此案例.一切都在Internet Explorer上完美运行.

现在; 我的Web服务应用程序在端口40000(localhost:40000)上运行,UI项目在其他一些随机端口上运行但仍在localhost中.就像我说的,我的ajax调用等在Internet Explorer上完美运行,但是当涉及到谷歌Chrome时,它就失败了.控制台显示以下错误:

XMLHttpRequest cannot load http://127.0.0.1:40000/abc.asmx/TheMethodName. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:17256' is therefore not allowed access. The response had HTTP status code 400.

顺便说一下,它之前就像"localhost:40000",因此互联网上的一些帖子建议我将其更改为IP地址而不是localhost.

无论如何,我还在我的web服务项目上编辑了我的web.config文件并添加了以下内容(这没有任何意义)

<system.serviceModel>
  <bindings>
    <webHttpBinding>
      <binding name="crossDomain" crossDomainScriptAccessEnabled="true">
      </binding>
    </webHttpBinding>
  </bindings>

  <behaviors>

    <serviceBehaviors>
      <behavior>
        <serviceMetadata httpGetEnabled="true" />
        <serviceDebug includeExceptionDetailInFaults="false" />
      </behavior>
    </serviceBehaviors>

  </behaviors>

  <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
</system.serviceModel>


<system.webServer>
  <modules runAllManagedModulesForAllRequests="true" />
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="http://localhost:17256" />
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
      <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
      <add name="Access-Control-Max-Age" value="1728000" />

    </customHeaders>
  </httpProtocol>
</system.webServer>

顺便说一句,如果我使用第一行:它完全失败并说响应头消息不匹配,我甚至无法启动服务调用.

是的,我还编辑了我的ajax调用,添加了以下参数:

crossDomain: true,

现在,我在这里失踪了什么？我已经在这几天了,而且我将要失去理智:)改变整个项目结构(服务 - 我的意思是UI风格)已经太晚了,因为代码的大量写入了服务和UI项目.请帮帮我绝望!:)

干杯

---

编辑:

所以事实证明我需要使用JSONP,而不是JSON - 因为它不会受到访问控制的困扰,这很好.我可以将我的ajax调用转换为JSONP调用.但我需要另一个帮助:)

我编写了一个全局的ajax方法,它在单独的页面上从每个操作调用,它的工作方式就像魅力(当然在Internet Explorer上).现在我该怎么做才能将这个包装函数转换成一个jsonp的东西呢？

function RemoteCall(WebService, RemoteMethod, RemoteParameters, callbackResult) {

if (RemoteParameters == null || RemoteParameters == "") {
    RemoteParameters = "{ }";
}

var remoteCall = $.ajax({
    type: "POST",
    url: ProvideService(WebService, RemoteMethod),
    data: RemoteParameters,
    contentType: ajaxContentType,
    dataType: ajaxDataType,
    async: true,
    crossDomain: true,
    success: function (msg) {
        msg.header("Access-Control-Allow-Origin", "*");
        callbackResult(msg.d);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        callbackResult(xhr.status + '\r\n' + thrownError + '\r\n' + xhr.responseText);
    }
});

}

我看到一些帖子,我应该添加一个属性作为jsonp:'jsonp_callback'与回调方法(这是我感到困惑的地方).那这个呢？

另一件事; 我一直在将json参数作为文本发送到变量中

var jSONParams = '{ UserID: "1", EmailAddress: "a@b.com" }'; 

我应该继续以相同的格式发送它还是应该转换为某种JSON对象？

BTW:我的全局ajax函数是一个完全独立的JS文件 - 不确定它是否有任何区别但是......

干杯

Answer 1

我更愿意只启用CORS而不是更改所有的AJAX调用.

您是否尝试修改web服务的web.config以添加以下行？

<system.webServer>
    <httpProtocol>
        <customHeaders>

            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>

检查这个问题是否CORS/JSONP对你更好, 那么,JSONP还是CORS？

Answer 2

谢谢大家的答案;

我找到了解决问题的方法。看来我没有充分注意错误消息:)

在我将Access-Control-Allow-Origin标头添加到 web.config 文件中后，结果发现我开始收到一些其他错误，即缺少内容类型自定义标头，并且我认为我仍然收到 CORS 错误。

因此，将<add name="Access-Control-Allow-Origin" value="*" />定义添加到我的 web.config 中实际上首先解决了我的跨源问题！我还测试了使用以下 web.config 标头条目允许来自端口的特定域或请求，它也像魅力一样工作 - 因为我认为这是最好的选择，因为我不会公开发布我的服务。

<add name="Access-Control-Allow-Origin" value="http://localhost:17256" />

祝大家好运，问题解决了:)