今天在学习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. 如何将Chrome本地安装的扩展应用导出到本地

    有时由于种种原因,我们不能直接使用Chrome web store进行Chrome扩展应用的安装,这时可以让一位已经安装了某Chrome扩展应用的朋友将他的应用导出到本地成为.crx文件,然后发给你, ...

  2. 【vue开发】vue插件的install方法

    MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻 ...

  3. 【异常】ser class threw exception: java.sql.SQLException: The last packet successfully received from the server was 39,444 milliseconds ago. The last

    1 详细异常 ser class threw exception: java.sql.SQLException: The last packet successfully received from ...

  4. RT-Thread--时间管理

    时钟节拍 时钟节拍是特定的周期中断,可以看是系统心跳,中断之间的时间间隔取决于不同的应用,一般是 1ms–100ms,时钟节拍率越快,系统的额外开销就越大,从系统启动开始计数的时钟节拍数称为系统时间. ...

  5. NginX——配置负载均衡

    A.            在http模块加上upstream配置 upstream www.myweb.com { server  127.0.0.1:9100 weight=3; server  ...

  6. Java基础 线程的通信的三个方法/ 交替数数线程 / 生产者&消费者线程问题

    线程通讯笔记: /** 线程通信 三个方法: * wait(): 调用该方法 是该调用的方法的线程释放共享资源的锁,进入等待状态,直至被唤醒 * notify() : 可以唤醒队列中的第一个等待同一共 ...

  7. phpstudy修改端口及网站根目录和访问 localhost 显示目录文件夹

    一.其它选项菜单=>phpStudy设置=>端口常规设置(勾选允许目录列表): 二. Apache http端口:80 网站目录:D:\phpStudy\PHPTutorial\WWW 默 ...

  8. C指针乱记

    //int a[3][4] = { { 66, 2, 3, 4 }, { 5, 6, 7, 8 }, { 9, 10, 11, 12 } }; //读取二维数组任意元素hint int(*)a[4] ...

  9. redis在应用中使用连接不释放问题解决

    今天测试,发现redis使用的时候,调用的链接一直不释放.后查阅蛮多资料,才发现一个配置导致的.并不是他们说的服务没有启动导致的. 1)配置文件 #redis连接配置================= ...

  10. Vue引入非npm的js库

    Vue引入非npm的js库 Vue项目有时候需要一些没有export的js库,不能通过import引入,那么使用方法如下 1.可以在index.html页面使用script标签引入,当然也可以使用cd ...