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

  前一篇文章在网页中使用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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Access-Control-Allow-Origin 是一个HTTP部字段,用于在跨源资源共享(CORS)中控制服务器允许哪些来源(即域名或协议)访问资源。这个字段告诉浏览器,当前服务器响应是否允许特定的源进行跨域请求。 设置 Access-Control-Allow-Origin 的步骤通常是针对服务器端的配置,具体取决于你的服务器技术(如Node.js、Express、Spring Boot等)。如果你使用的是Web服务器(例如Apache或Nginx),可以在 `.htaccess` 或服务器配置文件中设置。如果你是后端开发,可能需要在路由处理程序或中间件中添加。 以下是一些常见的设置示例: 1. **Node.js (Express)**: ```javascript app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); // 允许所有源访问 res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); if (req.method === 'OPTIONS') { res.status(204).end(); // 对预检请求(OPTIONS)直接返回204 } else { next(); } }); ``` 2. **JavaScript Fetch API** (前端设置): ```javascript fetch(url, { headers: { 'Origin': 'https://your-origin.com', // 或者根据实际请求源设置 'Access-Control-Allow-Origin': 'https://your-origin.com', }, }) ``` 3. **Nginx** (在服务器配置文件中): ```nginx add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization'; ``` 注意 `*` 表示通配所有源,如果只想允许特定源,可以替换为实际的源(例如 `http://example.com`)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值