代码地址:github.com/XinYueXiao/…
一、 制造不同源
1. 创建一个服务器3006,用于处理请求
1.1 在index.html页面,模拟请求api/users
1.2 模拟服务器,服务器在3006端口
1.3 使用nodemon启动api.js,在http://localhost:3006/可以看到请求信息
nodemon是用于启动node服务的,使用该工具保存后自动更新服务代码,不用重新执行启动文件
2. 创建另一个服务器3008,用于请求数据
2.1 两个端口服务一起启动,在index.js引入两个服务文件,并启动index.js
2.2 此时访问3008,访问api/users 404
3.解决它
3.1 👁 端口问题
3.1.1修改index.html接口请求为3006端口
- 对不同端口的接口请求进行对比,发现通过3008访问3006时,接口请求成功,浏览器去无显示
- 查看浏览器错误 ---> 此时发生了跨域的请求(端口不同)
通过CORS策略已阻止从源“ http://localhost:3008”访问“http://localhost:3006/api/users”
处的XMLHttpRequest:“ Access-Control-Allow-Origin”标头的值为“http://localhost:3008' 不等于提供的来源。
- 由此得知需要在服务端设置`Access-Control-Allow-Origin`
-未设置`Access-Control-Allow-Origin`
-设置`Access-Control-Allow-Origin`,页面显示正常
3.1.2由上可知,跨域是被浏览器限制住了,到这里结束了吗?并没有
上面的例子只是一个简单的请求,http还会发送预检请求,什么情况会触发预检请求呢?HTTP请求使用了以下HTTP的方法
- PUT
- DELETE
- CONNECT
- OPTIONS
- TRACE
- PATCH
或者人为设置了对 CORS 安全的首部字段集合之外的其他首部字段
作者:coder_sherryAccept
Accept-Language
Content-Language
Content-Type
DPR
Downlink
Save-Data
Viewport-Width
Width
Content-Type
的值不属于下列之一:
application/x-www-form-urlencoded
multipart/form-data
text/plain
链接:www.jianshu.com/p/b55086cbd…(可以查看更详细的解释)
来源:简书
3.2 👁预检请求问题
3.2.1模拟预检请求 --> 人为设置CORS不安全字段
此时浏览器出于pending状态,需要实现预检请求使其变成ok状态
3.2.2实现预检请求-->设置不安全字段为允许
- 预检请求改为通过后,会发起两个请求,第一个为预检请求,设置`X-Token`为允许字段
- 第二个为普通请求,此时的X-Token已变成允许,请求正常,并为普通请求设置X-Token值
3.3 👁`withCredentials`跨域请求凭证
XMLHttpRequest.withCredentials 属性是一个Boolean
类型,它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-siteAccess-Control
)请求。在同一个站点下使用withCredentials属性是无效的。