Angular CORS 跨域请求解决方法

CORS：跨域资源共享

实际分两步请求：

第一步.预检：

（无论响应什么数据都不会传到js程序里，只是浏览器做判断用，可以根据 请求方式 OPTIONS 和 Origin 请求头判断是否是预检）

请求头：OPTIONS

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

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

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-Methods 和Access-Control-Allow-Headers 提供的信息） 可以被缓存多久。

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

第二步.正式请求：

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

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

转载请保留原文链接： https://zodream.cn/blog/id/21.html