前端跨域请求头（前后端跨域请求）



看前你需要知道：

cors跨域的问题 解决的根本在于后端，前端只能暂时阻止浏览器禁用跨域行为，或则自己开启代理调试；

前端自己暂时性解决的办法一览：

• disable-web-security: Mac中命令行加跨域标志打开Chrome，参考文章, 下面的示例是我在mac中使用的：

• webpackServer代理或则开启nginx代理 ，参考文章

• ：是一项约定，是浏览器的一种安全行为。是为了阻止一个域下的文档或脚本读取，所以拦截了响应。这是一个用于。
• ：跨来源资源共享（CORS）是一份浏览器技术的规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让前端用常用的 XMLHttpRequest，这种方式的错误处理比JSONP要来的好，JSONP对于 RESTful 的 API 来说，发送 POST/PUT/DELET 请求将成为问题，不利于接口的统一。但另一方面，JSONP 可以在不支持 CORS 的老旧浏览器上运作。不过现代的浏览器（IE10以上）基本都支持 CORS。
• （option）:在 CORS 中，可以使用 OPTIONS 方法发起一个预检请求(一般都是浏览检测到请求跨域时，会自动发起)，以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法；Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。服务器所返回的 Access-Control-Allow-Methods 首部字段将所有允许的请求方法告知客户端。该首部字段与 Allow 类似，但只能用于涉及到 CORS 的场景中。

话不多说，先上代码：

但实际上在devtools打印了如下错误信息：Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.仔细想一想，好像，似乎这个问题遇到过，还提过问，确实提过，链接在这里。但这次的设置和上次一样，就在header里多加了一个自定义token，但却报了和上次没有设置headers: {'Content-Type': 'application/x-www-form-urlencoded'}一样的错误信息，于是，不知所措，算了，重头再来，好好百度，研究一下cors跨域。

关于Access-Control-Max-Age

最近又开始写java，再回来看这个，发现当时Access-Control-Max-Age设置了1.其实这样写有很大问题，因为每个复杂请求都会发两次。显然这样是当代所不能接受的，所以Max-Age的值适合设的大一些，具体多大很业务需求相关。另外Access-Control-Max-Age不是针对请求域名有效的，是请求的完成路径有效的，比如第一次发出。

会产生一次options请求和一次post请求，然后我再请求一次，这时没有预检请求了，只有post请求。但再发送一次

请求，会发现又产生了一次options请求和一次post请求，所以Access-Control-Max-Age不是针对相同的origin有效，而是针对相同的requestUrl有效。很重要哦。

其实更严格来讲，是针对请求头和请求方法，比对是否一致，来决定是否需要重新发起预检；另外，如果调试模式勾选了disable-cache，也会导致每次都会预检，导致Access-Control-Max-Age设置无效；

当在后端实现添加上面的源码后，皆大欢喜，问题得以解决，补上失败和成功,自己截下的两张请求响应图。

仔细看请求响应失败发起响应那张图，在General的数据集中，可以看到方法是options，而非代码指定的post请求，所以这是一次浏览器发出的一次预检请求，让服务器确认此IP是否有访问的权限，如果有，服务器需要返回一个2xx的状态码给浏览器。紧接着再发起一次简单请求。如下面在devtools中的截取图片（为了对比清除，我把两次分别截取，做了拼接，因为不会做动态图）。可以看到同一个post请求，实际上产生了两次网络连接。

但关于cors,要去探索的，还有很多很多，所以遵循革命语录：实践（有时也可以是时间）是检验真理的唯一标准，是没有错的。后续有新的收获，再补充。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hd-yjs/72423.html