Angular CORS 跨域请求解决方法

Fork Me On Github
zodream 编程技术 2018年12月

CORS:跨域资源共享

实际分两步请求:

第一步.预检:

(无论响应什么数据都不会传到js程序里,只是浏览器做判断用,可以根据 请求方式 OPTIONSOrigin 请求头判断是否是预检)

请求头:OPTIONS

   
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: GET
Origin: http://localhost:4200
123

Access-Control-Request-Headers 告诉服务端第二步将带的请求头

Access-Control-Request-Method 第二步将使用的请求方式

Origin 当前的域名

允许的响应头:

     
Access-Control-Allow-Credentials:
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 0
12345

Access-Control-Allow-Credentials 告诉浏览器第二步是否允许带上cookie 默认不带, true 为带上

Access-Control-Allow-Headers 允许带的请求头,必须全匹配才行, * 表示允许任何请求头

Access-Control-Allow-Methods 允许的请求方式 * 都允许

Access-Control-Allow-Origin 允许的请求域名 * 不限制

Access-Control-Max-Age 这个响应首部表示 preflight request (预检请求)的返回结果(即 Access-Control-Allow-MethodsAccess-Control-Allow-Headers 提供的信息) 可以被缓存多久。

注:需要注意的是Access-Control-Max-Age的设置针对完全一样的url,如果url加上路径参数,其中一个urlAccess-Control-Max-Age设置对另一个url没有效果

第二步.正式请求:

(如果第一步没有获取到允许的响应头就不会发生第二步)

本次依然需要加上允许的跨域的响应头,js程序才能接收到相应的数据

点击查看全文
标签: angular
0 1470 0
在 angular 项目中实现对页面的访问控制
按下回车键,焦点移动到下一个表单或提交表单
使用ng-template 显示tree结构数据
使用 ViewContainerRef.createComponent 替代 ComponentFactoryResolver
angular 12使用 KaTex 显示 AsciiMath 格式的公式