jQuery调用WebAPI报错“已拦截跨源请求：...,CORS 预检响应的‘Access-Control-Allow-Headers‘,不允许使用头‘content-type”’

最新推荐文章于 2024-07-11 15:38:00 发布

gc_2299

最新推荐文章于 2024-07-11 15:38:00 发布

阅读量2.2k

点赞数

分类专栏：网页编程文章标签： jquery CORS

本文链接：https://blog.csdn.net/gc_2299/article/details/120983653

版权

网页编程专栏收录该内容

149 篇文章 11 订阅

订阅专栏

前一篇文章在网页中使用jQuery ajax调用后台webapi获取气泡图数据，并以图形方式在页面中展示。接着想在页面中添加新增气泡图数据功能，可以将页面中的输入通过webapi写入MongoDB数据库，于是在webapi项目的Controller类和页面中分别增加了下列代码：

		[HttpPost]
        public ActionResult Create(BubbleData bData)
        {
            _bubbleService.Create(bData);
            return NoContent();
        }

		$(addData).click(function()
         {
            $.ajax({
            type: "POST",
            url: "http://localhost:2001/api/BubbleData",
            contentType: "application/json", 
            dataType: "json", 
            data: JSON.stringify({ x: 23, y: 38,r:7 }), 
            success: function (jsonResult) {
                alert(jsonResult);
            		}
             });
         })

但是在页面中点击添加数据按钮时，火狐浏览器报如下错误：
在这里插入图片描述该错误类似于《jQuery调用WebAPI报错“已拦截跨源请求：同源策略禁止读取位于…的远程资源”’》中提到的错误，不同之处在于后者的具体错误是“CORS 头缺少“Access-Control-Allow-Origin””，其解决方法是在startup文件的ConfigureService函数中增加如下代码（还在其它地方有改动，但本文中只用到了这部分）：

	services.AddCors(options =>
            {
                options.AddPolicy("any", builder =>
                {
                    builder.WithMethods("GET", "POST", "HEAD", "PUT", "DELETE", "OPTIONS")
                .AllowAnyOrigin(); 
                });
            });

本文中报错是CORS中Access-Control-Allow-Headers有限制，于是在上述代码中的AllowAnyOrigin函数后根据VSCode智能提示查找是否与AllowHeader相关的函数，最终发现有个AllowAnyHeader函数，看函数名称的意思是允许任意头，于是将上述代码修改为下列方式，再运行程序即可正常访问webapi（参考文献2介绍了更简洁的方式）。

services.AddCors(options =>
            {
                options.AddPolicy("any", builder =>
                {
                    builder.WithMethods("GET", "POST", "HEAD", "PUT", "DELETE", "OPTIONS")                   
                .AllowAnyOrigin().AllowAnyHeader(); 
                });
            });

参考文献：
[1]https://docs.microsoft.com/zh-cn/dotnet/api/microsoft.aspnetcore.cors.infrastructure.corspolicy.allowanyheader?view=aspnetcore-5.0
[2]https://blog.csdn.net/xtjatswc/article/details/98552446