总结-使用CORS解决跨域问题(上)

简介: 对前端来说跨域应该是不陌生的,解决跨域的方案有很多种。而我司前端接口调用也正是CORS的方式,所以难免在联调阶段会遇见一些CORS跨域的问题,下面通过一个简单的demo验证一下CORS解决跨域的过程中,对一些不清楚的知识点做一个简单的总结

对前端来说跨域应该是不陌生的,解决跨域的方案有很多种。而我司前端接口调用也正是CORS的方式,所以难免在联调阶段会遇见一些CORS跨域的问题,下面通过一个简单的demo验证一下CORS解决跨域的过程中,对一些不清楚的知识点做一个简单的总结


示例 demo 已经放在GitHub 上, 其中目录client文件夹托管客户端代码、server目录作为处理CORS的服务端,分别把两端的代码跑起来,就可以进行CORS相关配置的学习了

对CORS的了解可以先看下一下阮老师的这两篇文章:


1、浏览器同源政策及其规避方法


2、跨域资源共享CORS详解


假设你已经了解服务端处理CORS跨域时,会配置相关的一些响应头,如下:


Access-Control-Allow-Credentials: true,
Access-Control-Allow-Origin: *,
Access-Control-Allow-Headers: 'header',
Access-Control-Expose-Headers: 'serve-header',
Access-Control-Allow-Methods: 'methods',
Access-Control-Max-Age: '1800', // 30min = 1800s


那这些响应头都具体是神马作用呢? 下面会结合demo来了解各参数的配置作用,并给出结果图。


第一个参数:Access-Control-Allow-Origin


作用:服务端允许跨域的源,也就是浏览器的输入的地址。demo中为:http://huoyun-test.djtest.cn 包括端口号80,80端口默认省略了。


如果把server端的origin改为: http://huoyun-online.djtest.cn, 当发送请求的时候,浏览器包如下错误:



如上图由请求头和响应头以及控制台(1、2、3)三点得出:由于CORS策略,通过浏览器预检请求options得出源Origin对应的url不在CORS跨域允许的范围类,因此呢,服务端应该设置对应的页面域名http://huoyun-test.djtest.cn,这样才不会报这样的错误。


第二个参数:Access-Control-Allow-Credentials


作用:携带cookie


如果调用接口过程中,需要cookie的传递,则需要设置这个参数为true,并且Access-Control-Allow-Origin就不能设为星号*,必须指定明确的、与请求网页一致的域名。 如果前端采用axios来请求接口时,需同时设置axios.defaults.withCredentials = true;


这里如果设置 Access-Control-Allow-Origin: * ,会报如下的错误:



也就是上面说的Access-Control-Allow-Origin此时不能设置为星号*,如果不需要携带cookie时即不设置Access-Control-Allow-Credentials响应头,但此时前端设置了axios.defaults.withCredentials=true;,浏览器也会包类似的错误:



即当浏览器通过XMLHttpRequest对象发送请求时,设置了withCredentials属性为true时,对应的服务端此时需要做相应的处理。


因此当前后端在CORS跨域出现问题时,通过修改demo来验证就可以很好的找到答案了,而不是百度了一遍,依然是处于茫然中,不知道要让服务端干嘛,同时作为前端应该怎么做,不让自己此时成为前端小白,有话可说...


第三个参数:Access-Control-Allow-Headers


作用:前后端需要通过header来进行数据交互时,需要设置使用到的header字段。

如前端通过设置请求头header中的字段axios.defaults.headers.common['client-header'] = 1;, 如果此时Access-Control-Allow-Headers字段没有设置对应的header字段,浏览器会报如下错误:



也就是说通过前端设置的自定义header字段,需要服务端在Access-Control-Allow-Headers字段中设置对应的header


相关文章
|
2月前
|
JSON 安全 前端开发
浅析CORS跨域漏洞与JSONP劫持
浅析CORS跨域漏洞与JSONP劫持
81 3
|
8天前
|
开发框架 中间件 Java
如何处理跨域资源共享(CORS)的 OPTIONS 请求?
处理 CORS 的 OPTIONS 请求的关键是正确设置响应头,以告知浏览器是否允许跨域请求以及允许的具体条件。根据所使用的服务器端技术和框架,可以选择相应的方法来实现对 OPTIONS 请求的处理,从而确保跨域资源共享的正常进行。
|
8天前
|
JavaScript 前端开发 API
跨域资源共享(CORS)的工作原理是什么?
跨域资源共享(CORS)通过浏览器和服务器之间的这种交互机制,在保证安全性的前提下,实现了跨域资源的访问,使得不同源的网页能够合法地获取和共享服务器端的资源,为现代Web应用的开发提供了更大的灵活性和扩展性。
|
22天前
|
JSON 前端开发 安全
CORS 是什么?它是如何解决跨域问题的?
【10月更文挑战第20天】CORS 是一种通过服务器端配置和浏览器端协商来解决跨域问题的机制。它为跨域资源共享提供了一种规范和有效的方法,使得前端开发人员能够更加方便地进行跨域数据交互。
|
1月前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
131 7
|
2月前
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理
|
3月前
|
Web App开发 JSON 数据格式
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
|
3月前
|
API
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
|
3月前
|
安全 前端开发 Java
Web端系统开发解决跨域问题——以Java SpringBoot框架配置Cors为例
在Web安全上下文中,源(Origin)是指一个URL的协议、域名和端口号的组合。这三个部分共同定义了资源的来源,浏览器会根据这些信息来判断两个资源是否属于同一源。例如,https://www.example.com:443和http://www.example.com虽然域名相同,但由于协议和端口号不同,它们被视为不同的源。同源(Same-Origin)是指两个URL的协议、域名和端口号完全相同。只有当这些条件都满足时,浏览器才认为这两个资源来自同一源,从而允许它们之间的交互操作。
Web端系统开发解决跨域问题——以Java SpringBoot框架配置Cors为例
|
4月前
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理