今天在学习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. vs-code 的常用插件

    最近编辑器转移至VS-Code上面了,为什么抛弃sublime呢,因为,sublime在项目逐渐变大的过程中(项目已上万行,还在不停继续变大),sublime会出现卡顿,反应缓慢,甚至未响应状态,基于 ...

  2. Redis二进制安全概念

    二进制安全是指,在传输数据时,保证二进制数据的信息安全,也就是不被篡改.破译等,如果被攻击,能够及时检测出来. 二进制安全包含了密码学的一些东西,比如加解密.签名等. 举个例子,你把数据1111000 ...

  3. HTML锚点的使用

    锚点: 连接到的本页面的位置:

  4. Tomcat之session解决方案

    目录 session方案及配置 一.session绑定 二.session复制 三.使用memcached解决session问题 四.使用redis解决session问题 五.memcached和re ...

  5. stm32f429 仿真器不能识别芯片

    刚买的野火挑战者开发板,下载几次程序后,忽然就不能通过JLINK下载了,提示如下错误: No Cortex-M Device found in JTAG chain. Error: Flash Dow ...

  6. linux 基础10-磁盘配额管理

    1. 基本概念 1.1 概念: 在linux系统中,由于是多人多任务的使用环境,所以会有多人共同使用一个硬盘空间的情况,如果其中少数几个人大量使用了硬盘空间的话,势必会压缩其他使用者的使用空间,因此管 ...

  7. django 搜索引擎 Elasticsearch 安装使用

    1.使用docker安装elasticsearch a.获取镜像 # 拉取镜像到本地仓库 # docker image pull delron/elasticsearch-ik:2.4.6-1.0 由 ...

  8. opengl 4.5 中文api 链接

    https://www.cnblogs.com/wiki3d/p/opengl_a.html

  9. aiops常用算法

    1.数据聚合/关联技术 概念聚类算法AOI分类算法K近邻/贝叶斯分类器/logistic回归(LR)/支持向量机(SVM)/随机森林(RF) 2.数据异常点检测技术独立森林算法 3.故障诊断和分析策略 ...

  10. 5.7 zip 版本的安装 以及遇到的坑

    https://blog.csdn.net/indexman/article/details/80291537 https://blog.csdn.net/weidong_y/article/deta ...