c# - Ajax Web 服务调用 - 不存在 'Access-Control-Allow-Origin' header

Question

嘿呀，

我知道之前有人问过这个问题，我已经阅读了这里每个问题的每一个答案，但似乎仍然无法让我的项目正常工作。不过，我的情况与其他问题有点不同，不确定这是否有任何不同，但我们开始吧。

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

现在；我的 Web 服务应用程序在端口 40000 (localhost:40000) 上运行，而 UI 项目在其他一些随机端口上运行，但仍在本地主机中。就像我说的，我的 ajax 调用等在 Internet Explorer 上运行完美，但在 Google 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.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>

顺便说一句，如果我使用第一行:它完全失败并表示响应 header 消息不匹配，我什至无法启动服务调用。

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

crossDomain: true,

现在，我在这里缺少什么？我已经这样做了好几天了，我快要失去理智了:)现在改变项目的整个结构(我的意思是服务 - UI 样式)有点太晚了，因为已经将大量代码写入服务和用户界面项目。请帮助我绝望! :)

干杯

---

编辑:

所以事实证明我需要使用 JSONP，而不是 JSON - 因为它不会卡在访问控制的东西上，这很好。我可以将我的 ajax 调用转换为 JSONP 调用。但我需要另一个帮助:)

我已经编写了一个全局 ajax 方法，该方法从单独页面上的每个操作调用，并且它像 charm 一样工作(当然再次在 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 对象或其他东西？

顺便说一句:我的全局 ajax 函数在一个完全独立的 JS 文件中 - 虽然不确定它是否有任何区别......

干杯

Answer 1

我宁愿只启用 CORS 而不是更改所有 AJAX 调用。

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

<system.webServer>
    <httpProtocol>
        <customHeaders>

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

另请检查此问题，了解 CORS/JSONP 是否更适合您 So, JSONP or CORS?