如何在禁用网络安全的情况下使用 json 跨域请求？

Question

我有以下脚本可以对 return 有效载荷进行 REST/WCF WEBGET 调用。当 AppServer 和 Web Server 在同一个域中时，它工作得很好。

UI Javascript:

model.Source = new kendo.data.DataSource({
    serverFiltering: true,
    pageSize: 5,
    type: 'GET',
    transport: {
        serverFiltering: true,
        serverPaging: true,
        serverGrouping: true,
        read: {
            dataType: "json",
            crossDomain: true,
            url: function () {
                $('#ShowLink').hide();
                var searchValue = $('#someBox')[0].value;
                return $("#SearchUrl").val() + '/' + searchValue;
            },
            error: function (e) {
                //some code
            },
            success: function (e) {
                //some code
            },
            complete: function (e) {
                //some code
            }
        }
    },
    schema: {
        parse: function (response) {
            if (response.length == 0) {
                //some code
            }
            return response;
        }
    }
});

应用程序服务器 (WCF)

    [WebGet(UriTemplate = "someresourceA/{id}/group/{searchText}",  
    RequestFormat = WebMessageFormat.Json, 
    ResponseFormat = WebMessageFormat.Json)]
    public IEnumerable<SomeDTO> SearchUrl(string id, string searchText)
    {
        var repository = _repositoryFactory.GetRepository<IRepo>();
        return repository.GetData(searchText, int.Parse(id));
    }

但是，当我进行跨域请求时。我收到以下错误

XMLHttpRequest cannot load http:///App.Query.Service/SomeService.svc/resource/1/…%5D%5Bfield%5D=displayText&filter%5Bfilters%5D%5B0%5D%5BignoreCase%5D=true. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

为了修复，我在显示结果的 chrome 浏览器上执行了以下命令。

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

数据显示正确，预期结果return已发送到浏览器。

但是我不希望在生产环境中这样做。用户将启用浏览器网络安全。因此，上述解决方案行不通。

有人能给我指出正确的方向来避免这种情况吗？或者有其他解决方案吗？

我也试过 webServer/web.config 选项，但没有用。

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

非常感谢任何想法。

Answer 1

在你的 Javascript ajax 中你需要使用 "jsonp" 作为数据类型而不需要 "crossDomain: true,"

read: {
     dataType: "jsonp",
     url: function () {
           $('#ShowLink').hide();
           var searchValue = $('#someBox')[0].value;
           return $("#SearchUrl").val() + '/' + searchValue;
     }

并且您需要修改 "App.Query.Service" 项目中的 web.config 文件并添加以下内容headers:

<system.webServer>
  <httpProtocol>
    <customHeaders>      
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
  </httpProtocol>
  </system.webServer>

我遇到了这个问题，我也尝试了以下解决方案，但是通过以下解决方案，我没有收到我的 ajax Http 中包含的那些 headers (allow-origin)当我通过 Fiddler 监控它们时的响应。

1- WCF 上的 CORS 实施：CustomHeaderMessageInspector：IDispatchMessageInspector 实施：EnableCrossOriginResourceSharingBehavior：BehaviorExtensionElement，IEndpointBehavior

根据此处的指示：http://enable-cors.org/server_wcf.html

2- 在 Global.ascx.cs

中实施 Application_BeginRequest()

希望有用。

如何在禁用网络安全的情况下使用 json 跨域请求？

How to use cross domain requests using json with disable web security?

ajax

asp.net-mvc

json

jsonp

cross-domain