Angular 发布请求 Cors 问题答案

【问题标题】：Angular Post Request Cors issueAngular 发布请求 Cors 问题
【发布时间】：2019-10-03 11:52:52
【问题描述】：

当我尝试向 c# web api 发出 post 请求时遇到了 CORS 问题。以下是错误：

从源访问“不同域中的 api url”处的 XMLHttpRequest “客户端 URL”已被 CORS 策略阻止：对预检的响应请求未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。

与 GET 请求 相同的 API 调用正在运行。

两个站点都部署了启用 Windows 身份验证。

我正在使用带有打字稿的 Angular io, 1.7.**。下面是我如何在 typescript 中使用 post 请求调用 api。

let httpHeader = new HttpHeaders();
httpHeader = httpHeader.set('Content-Type', 'application/json');

this.http.post(this.apiUrl, this.bodyObject,
  {
  headers: httpHeader,
  withCredentials:true
}).pipe(map(response => {
  return response;
})).subscribe(result => {
  console.log(result);
}, function (err) {
  console.log(err);
});

我首先认为这可能是 api cors 问题，并使用下面的 jquery 代码进行了测试，并且可以正常工作。

   <script>

       $.ajax({
            url:apiUrl,
            type: 'post',
            data: {
                serviceName: "Country"
            },
            xhrFields: {
                    withCredentials: true
                },
            dataType: 'json',
            success: function (data) {
                console.info(data);
            },
            error: function (err) {
                console.error(err);
            }
        });

  </script>

所以我认为，我的角度代码与我有关。你能告诉我可能是什么问题吗？

【问题讨论】：

CORS 问题是服务器拒绝将数据传输到客户端，所以你的角度代码很好，问题出在服务器端。你在WebApiConfig 类中设置了config.EnableCors(cors); 吗？
POST，需要修改你的API server，添加headerAccess-Control-Allow-Origin: *
可能是您通过ajax 的请求默认添加了CORS 标头（可能取决于您的jquery 版本）并且您的角度post 不包含该标头。您需要检查请求标头
嗨 skroid 和 Umesh，正如我在其中解释的那样，那些 .net 代码已经添加到 api（服务器端）中，并使用 jquery 作为（客户端）进行了测试。特别是使用那个角度打字稿（httpClient），它在执行发布请求时并没有完成这项工作。
@ThanHtetAung httpHeader = httpHeader.set('Content-Type', 'application/json'); httpHeader.set('Access-Control-Allow-Origin', '*');尝试一次并检查

标签： c# angular asp.net-web-api

【解决方案1】：

尝试在 $.ajax 中添加它

headers: {
                    'Access-Control-Allow-Origin': '*',
                    'Content-Type':'application/json'
          },
crossDomain: true,

【讨论】：