CORS 不适用于 jQuery

Posted 2023-04-13

【中文标题】CORS 不适用于 jQuery

【英文标题】：CORS not working with jQuery

【发布时间】：2018-05-29 17:12:22

【问题描述】：

我在 WCF RESTful 服务中有以下代码

public EmployeeJSON GetEmployeeJSON(string id)
    
        List<EmployeeJSON> employees = new List<EmployeeJSON>()
        
             new EmployeeJSON() Name="Sumanth",Id=101,Salary=5000.00 ,
             new EmployeeJSON() Name="Ehsan",Id=102,Salary=6000.00 ,
        ;

        var Employee = (from x in employees
                        where x.Id.ToString() == id
                        select x);


        return Employee.FirstOrDefault() as EmployeeJSON;
    

下面是RESTful Service的声明

[OperationContract]
[WebInvoke(Method = "GET", UriTemplate = "GetJson/id", ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
EmployeeJSON GetEmployeeJSON(string id);

当我在浏览器中执行以下 URL 时

http://localhost:1249/Service1.svc/GetJson/101

我得到如下结果

"GetEmployeeJSONResult":"Id":101,"Name":"Sumanth","Salary":5000

但是当我从 jQuery 调用时，代码会出错并显示空消息

$(document).ready(function () 
    );

    var GetJson = function () 
        $.ajax(
            type: "GET",
            url: "http://localhost:1249/Service1.svc/GetJson/101",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (data) 
                var result = data.GetEmployeeJSONResult;
                var id = result.Id;
                var name = result.Name;
                var salary = result.Salary;
                $('#jsonData').html('');
                $('#jsonData').append('<table border="1"><tr><th>Employee Id</th><th>Name</th><th>Salary</th></tr><tr><td>' + id + '</td><td>' + name + '</td><td>' + salary + '</td></tr></table>');

            ,
            error: function (xhr) 
                alert(xhr.responseText);
            
        );
    

下面是代码，我放在WCF RESTful Service的web.config中

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

我在这里错过了什么？

【问题讨论】：

您是否也可以添加xhr 变量的全部数据（来自您的错误块）？

请查阅规范和数百篇关于此的文章。 Access-Control-Allow-Origin 只是您必须包含的 一个 标头，通常还有其他标头。

打开浏览器开发控制台，看看究竟是什么请求和响应。我的疯狂猜测是响应将是 405 方法不允许。

可能重复？ ***.com/questions/40197460/…

【参考方案1】：

通过将下一行代码添加到 Startup 类来配置您的 WEB API 以使用 CORS：

app.UseCors(CorsOptions.AllowAll);
var config = new HttpConfiguration();
var enableCors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(enableCors);

*其中app 是IAppBuilder 而config 是HttpConfiguration

【讨论】：

是否可以在web.config文件<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> </customHeaders> </httpProtocol> </system.webServer>中这样添加。

对我来说，在 web.config 文件中设置上面的注释不起作用。

需要配置WEB API，添加headers属性是不够的。

我根本没有使用 WEB API。我正在使用一个调用该服务的简单 Web 应用程序。此外，当我尝试使用开发人员工具进行调试时，我收到 404 错误为Failed to load http://localhost:1249/Service/Service1.svc/GetJson: Response for preflight has invalid HTTP status code 404。这里在 URL 中添加了额外的Service，同时在 Chrome 的开发工具中抛出错误。