楼下细说
1、什么场景下会在一次请求里会发起两次请求?
浏览器在一次请求中发起两次请求的场景通常出现在CORS(跨源资源共享)的预检请求中。 当一个请求需要通过CORS进行跨域访问资源时,如果该请求不满足“简单请求”的条件(如使用了自定义头部,或者使用了除GET、HEAD、POST之外的HTTP方法), 浏览器会首先发送一个OPTIONS请求作为“预检”请求到服务器,询问服务器是否允许跨域请求。 如果服务器响应允许,浏览器才会发起实际的请求(如POST请求)。 这就是为什么在一次请求中会看到两次请求发生的原因。
2、第一次和第二次请求分别是什么,有什么区别?
第一次请求是OPTIONS请求,这是一个HTTP方法,用于预检请求,询问服务器关于跨域规则的信息。 第二次请求是实际的请求,如GET或POST,这取决于原始请求的类型。 这两次请求的主要区别在于:
- 请求方法不同:第一次请求总是使用OPTIONS方法,而第二次请求使用的方法则是实际需要执行的方法(如GET、POST等)。
- 目的不同:OPTIONS请求是为了确认服务器是否允许跨域请求,而第二次请求则是实际的数据交换请求。
- 响应内容不同:OPTIONS请求的响应通常只包含允许的方法和头信息等CORS策略,不包含业务数据;而第二次请求的响应则包含实际的业务数据。
3、为什么浏览器有同源策略,而服务器没有?
浏览器实施同源策略是为了保护用户信息安全,防止恶意网站通过脚本对其他网站进行操作,从而窃取数据或进行其他恶意行为。 同源策略确保了来自不同源的文档或脚本在没有明确授权的情况下无法读取或操作对方的资源。 服务器端没有同源策略的限制,因为服务器处理的是数据请求和响应,它们通常需要与多个不同的客户端或服务器交互。 服务器端的安全措施通常集中在认证、授权、数据加密等方面,而不是限制数据请求的来源。
4、为什么本地使用webpack进行dev开发时,访问的是127.0.0.1,但是却依然能在不需要服务器端配置cors的情况下访问到线上接口?
当使用webpack进行本地开发时,通常会配置一个开发服务器(如webpack-dev-server),这个服务器运行在本地,通常监听127.0.0.1的某个端口。 在这种配置下,本地的开发环境可以被视为一个服务器,而不仅仅是静态文件的集合。 webpack-dev-server提供了一个功能叫做代理(proxy),这允许开发者将某些API请求转发到另一个服务器(通常是线上的API服务器)。 通过配置代理,当你在本地发起请求到API时,这个请求首先被发送到本地的webpack-dev-server, 然后webpack-dev-server将请求转发到配置的线上API服务器。 这样做的好处是,浏览器认为所有请求都是发送到同一个源(本地开发服务器),因此不会触发CORS错误。 这就是为什么即使线上服务器没有配置CORS,本地开发环境仍然可以访问线上接口的原因。