今天在学习Angular 的HttpInterceptor 拦截器时,发现添加了新的headers键值之后总是报跨域错误。后台使用的是asp.net core。

检查发现,在添加了新的header之后,每次请求之前都会先发送一个options请求,这个请求被后台拒绝了,所以导致报错。我的后台跨域代码只启用了 AllowAnyOrigin()

方法,所以拒绝了options请求。

为什么会产生options请求呢?参考以下文章,原来是添加了header之后产生非简单请求,所以浏览器会先发送一个options请求到服务器判断一下。

跨域之由Request Method:OPTIONS初窥CORS

由于是被后台拒绝的,所以修改后台代码就可以了。有两种方法

1.修改startup里的ConfigureServices 和 Configure方法

ConfigureServices:

    services.AddCors(options =>
{ options.AddPolicy("cors", p =>
{ p.AllowAnyOrigin();
p.AllowAnyHeader();
p.AllowAnyMethod();
p.AllowCredentials();
});
});

Configure:

 app.UseCors("cors");

2.仅修改Configure方法:

   app.UseCors(cfg =>
{
cfg.AllowAnyOrigin(); //对应跨域请求的地址
cfg.AllowAnyMethod(); //对应请求方法的Method
cfg.AllowAnyHeader(); //对应请求方法的Headers
cfg.AllowCredentials(); //对应请求的withCredentials 值
});

注意对于非简单请求,前三个Allow方法都是必须的。

跨域请求错误: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource的更多相关文章

  1. .Net Core 处理跨域问题Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

    网页请求报错: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Or ...

  2. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' heade

    XMLHttpRequest cannot load http://10.164.153.37:8050/WebService/WebService.asmx/wsGetStreetData. Res ...

  3. java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  4. has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    前端显示: has been blocked by CORS policy: Response to preflight request doesn't pass access control che ...

  5. Webapi 跨域 解决解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource 问题

    首先是web端(http://localhost:53784) 请求 api(http://localhost:81/api/)时出现错误信息: 查看控制台会发现错误:XMLHttpRequest c ...

  6. js跨域访问,No 'Access-Control-Allow-Origin' header is present on the requested resource

    js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...

  7. (转)AJax跨域:No 'Access-Control-Allow-Origin' header is present on the requested resource

    在本地用ajax跨域访问请求时报错: No 'Access-Control-Allow-Origin' header is present on the requested resource. Ori ...

  8. ABP PUT、DELETE请求错误405.0 - Method Not Allowed 因为使用了无效方法(HTTP 谓词) 引发客户端错误 No 'Access-Control-Allow-Origin' header is present on the requested resource

    先请检查是否是跨域配置问题,请参考博客:http://www.cnblogs.com/donaldtdz/p/7882225.html 一.问题描述 ABP angular前端部署后,查询,新增都没问 ...

  9. No 'Access-Control-Allow-Origin' header is present on the requested resource——Web Api跨域问题

    最近使用C#写了一个简单的web api项目,在使用项目中的.cshtml文档测试的时候没有任何问题,但是在外部HBuilder上面编写.html通过Ajax调用web api路径时报错: No 'A ...

  10. As.net WebAPI CORS, 开启跨源访问,解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource

    默认情况下ajax请求是有同源策略,限制了不同域请求的响应. 例子:http://localhost:23160/HtmlPage.html 请求不同源API http://localhost:228 ...

随机推荐

  1. 关于Vue中,checkBox等组件在赋值后,点击切换页面未及时更新问题

    我们经常碰到这样的问题,在v-for循环中,给某些组件(此处以checkBox为例)赋值后,组件并不能正常切换, 这是因为数据层太多,render函数没有自动更新,需手动强制刷新. 解决方法:在切换c ...

  2. Xmind ZEN破解版来袭:如何去除水印

    Xmind ZEN是一款十分优雅地思维导图软件,但是找不到其破解版,在导出图片时就会携带上水印. image-20190110110013642.png 当然,土豪请(点击这里关闭). image-2 ...

  3. css border-raidus 百分比和数值设置效果不同

    1.水平方向和竖直方向半径相等:设置数值和百分比的效果是一样的: 2.水平方向和竖直方向半径不相同:则效果不一致,具体参见:http://www.zhangxinxu.com/wordpress/20 ...

  4. Sliverlight/WPF 样式使用方法

    1,UserControl 页面级样式: UserControl.Resources style setter Property value. TargetType为应用的类型 <UserCon ...

  5. Codeforces 853B Jury Meeting

    题意 从城市1-n来的评审团到城市0商讨国家大事,离开和抵达的那一天不能讨论,飞机均当天抵达,给出所有飞机起飞抵达代价情况,问能否使所有评审员聚齐连续k天并返回,并求最小代价 思路 从前向后扫一遍,求 ...

  6. Linux命令——netstat

    参考:20 Netstat Commands for Linux Network Management Foreword Print network connections, routing tabl ...

  7. Windows 10版本区别

    在msdn资源站上看到两个下载不同的区别,二者都内置专业版,不同之处在于: consumer_editions 版本包含:(个人使用 零售版) Home(家庭版); Education(教育版) ; ...

  8. APP中的第三方“支付”功能测试建议

    目前市场上APP中带有支付功能的产品有非常多,那么APP中带有第三方支付功能的产品在这一模块该如何测试才尽可能的确保测试完整性. 正常流程: 正常使用支付宝.微信.银行卡(目前使用最多的第三方支付方式 ...

  9. [转载]Java 内存分配全面浅析

    Java 内存分配全面浅析 2013-02-20 17:54:45 袭烽 阅读数 91353更多 分类专栏: java基础   本文将由浅入深详细介绍Java内存分配的原理,以帮助新手更轻松的学习Ja ...

  10. 收集Nginx-access,Nginx-error日志

    1.配置Logstash [root@Logstash logstash]# vim /usr/local/logstash/config/nginx_log.conf input {   beats ...