jQuery ajax和CORS不工作

Question

我正在尝试从WepApi2控制器获取json响应

[EnableCors(origin = "*", methods = "*", headers = "*")]
public class DataController {
    public IEnumerable<int> GetData(RequestItems items) {
        ...
    }
}

使用此项尝试获取数据。。。

$.ajax({
  type: "POST",
  method: "POST",
  contentType: "application/json",
  url: "https://api.mysite.com/api/Data/GetData",
  data: JSON.stringify({ /* some data here */ }),
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "*",
    "Access-Control-Allow-Headers": "*"
  },
  xhrFields: {
       withCredentials: true
  },
  success: function(xhr) {
       console.log(xhr);
  },
  error: function(e) {
       console.log(e);
  }
});

我得到了这个...

阻止跨源请求：同一源策略不允许读取位于的远程资源https://api.mysite.com/api/Data/GetData.（原因：CORS标头“Access Control Allow Origin”与“*”不匹配）

我已经在网络上搜索了几乎所有我能找到的关于CORS和jQuery的信息，但我不知道该怎么办。请帮助！

Answer 1

您可以按照以下步骤操作-

1. WebAPI项目-将其添加到web.config-

<system.webServer>
    <modules>
      <remove name="FormsAuthentication" />
    </modules>
    <httpProtocol>
      <!-- THESE HEADERS ARE IMPORTANT TO WORK WITH CORS -->
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="POST, PUT, DELETE, GET, OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="content-Type, accept, origin, X-Requested-With, Authorization, name" />
      </customHeaders>
    </httpProtocol>
    <handlers>
      <remove name="WebDAV" />
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
  </system.webServer>

Answer 2

我将CORS与WebAPI一起使用，没有任何问题。也许我会描述一下我的工作。如果不相关，我会删除答案。但这对我来说很有用。

编辑：还要注意，对于CORS，标题必须作为响应。

我当然在使用OWIN。我的Startup.cs如下所示：

public static void Configuration(IAppBuilder app)
{
    var config = new HttpConfiguration();
    config.MapHttpAttributeRoutes();
    config.EnableCors(new EnableCorsAttribute("*", "*", "GET, POST, OPTIONS, PUT, DELETE"));
    WebApiConfig.Register(config);

    app.UseWebApi(config);
    app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
}

注意，我必须在我的WebApiConfig上显式地启用cors。然后当然通过应用程序继续。UseCors（Microsoft.Owin.Cors.CorsOptions.AllowAll）

然后只需在我的ApiController类上启用cors，就像您所做的那样：

[EnableCors("*", "*", "GET,POST")]
public class FauxDBController : ApiController
{
    [HttpPost]
    [AllowAnonymous]
    public mJSONSQLFAUXResponse XYZ(mJSONSQLFAUX data)
    {
    }
}

为了展示我使用的NuGet包，这里是我的packages.config：

<packages>
  <package id="Microsoft.AspNet.Cors" version="5.2.3" targetFramework="net452" />
  <package id="Microsoft.AspNet.WebApi" version="5.2.3" targetFramework="net452" />
  <package id="Microsoft.AspNet.WebApi.Client" version="5.2.3" targetFramework="net452" />
  <package id="Microsoft.AspNet.WebApi.Core" version="5.2.3" targetFramework="net452" />
  <package id="Microsoft.AspNet.WebApi.Cors" version="5.2.3" targetFramework="net452" />
  <package id="Microsoft.AspNet.WebApi.Owin" version="5.2.3" targetFramework="net452" />
  <package id="Microsoft.AspNet.WebApi.WebHost" version="5.2.3" targetFramework="net452" />
  <package id="Microsoft.CodeDom.Providers.DotNetCompilerPlatform" version="1.0.0" targetFramework="net452" />
  <package id="Microsoft.Net.Compilers" version="1.0.0" targetFramework="net452" developmentDependency="true" />
  <package id="Microsoft.Owin" version="3.0.1" targetFramework="net452" />
  <package id="Microsoft.Owin.Cors" version="3.0.1" targetFramework="net452" />
  <package id="Microsoft.Owin.Host.SystemWeb" version="3.0.1" targetFramework="net452" />
  <package id="Newtonsoft.Json" version="6.0.4" targetFramework="net452" />
  <package id="Owin" version="1.0" targetFramework="net452" />
</packages>

最后，我不使用jQuery，而是使用角度。带有ajax例程的js文件如下所示：

$http.post('http://localhost:59113/api/FauxDB/XYZ', { }).success(function (data, status, headers, config) {
    // something..
}).error(function (data, status, headers, config) {
    // something..
});

希望有帮助。