前端面试必备 | 前端跨域篇(P1-10)

1. 什么是跨域请求？为什么浏览器会限制跨域请求？

跨域请求是指在浏览器中，通过JavaScript发起的网络请求，目标地址与当前页面的域名、协议或端口不一致的情况。

浏览器会限制跨域请求是为了保护用户的安全和隐私。 同源策略是浏览器的一种安全机制，它限制了跨域请求的访问权限，防止恶意网站获取用户的敏感信息或进行恶意操作。

同源策略要求请求的域名、协议和端口必须完全一致，否则浏览器会阻止跨域请求的发送。 这种限制可以防止跨站脚本攻击（XSS）和跨站请求伪造（CSRF）等安全问题的发生。

2. 请解释一下同源策略是什么，以及它对跨域请求的影响。

同源策略是浏览器的一种安全机制，它要求在进行跨域请求时，目标地址的域名、协议和端口必须与当前页面完全一致。

同源策略对跨域请求有以下影响：

1. 阻止跨域读取数据：同源策略限制了通过JavaScript获取跨域页面的内容，包括读取页面的DOM元素、Cookie、LocalStorage等数据。

2. 阻止跨域操作：同源策略还限制了通过JavaScript操作跨域页面的能力，例如修改页面的DOM结构、执行JavaScript代码等。

3. 异常处理：如果发起了跨域请求，浏览器会抛出一个异常，阻止请求的继续执行。

为了实现跨域请求，可以使用一些常见的解决方案，如JSONP、CORS（跨域资源共享）、代理服务器等。这些解决方案可以绕过同源策略的限制，实现跨域通信。

3. 如何在前端实现跨域请求？请列举几种常见的跨域请求解决方案。

在前端中，有几种常见的跨域请求解决方案可以实现跨域通信，包括：

1. JSONP（JSON with Padding）：通过动态创建<script>标签来实现跨域请求，服务器返回的数据包裹在回调函数中。由于<script>标签没有跨域限制，因此可以获取到跨域请求的数据。

2. CORS（跨域资源共享）：在服务器端配置相应的响应头信息，允许特定的域名访问资源。可以通过设置Access-Control-Allow-Origin来指定允许的来源域名，实现跨域请求。

3. 代理服务器：通过在前端的同源服务器上配置一个代理服务器，将跨域请求转发到目标服务器，并返回结果给前端。如此一来，前端实际上是通过同源的代理服务器与目标服务器进行通信，绕过了浏览器的跨域限制。

4. WebSocket：基于WebSocket协议进行跨域通信，由于WebSocket协议不受同源策略的限制，可以在前端实现跨域请求。

这些解决方案各有其适用场景和使用方式，请根据实际需求选择合适的方案。同时，现代浏览器也提供了一些新的特性和API，如Fetch API、WebRTC、Web消息推送等，也可以用于跨域通信。

4. 请解释一下JSONP的原理，并说明它如何实现跨域请求。

JSONP（JSON with Padding）是一种实现跨域请求的技术。

它允许在不受同源策略限制的情况下，从一个域向另一个域请求数据。

在同源策略下，Web浏览器只允许通过Ajax请求与当前页面具有相同源（相同的协议、域名和端口）的资源。但对于需要在不同域之间共享数据的情况，JSONP提供了一种解决方案。

JSONP的原理基于动态创建<script>标签的特性。

• 它通过动态创建<script>标签，并指定其src属性为目标域的一个URL，该URL包含一个回调函数名作为查询字符串参数。
• 目标域的服务器接到请求后，将数据包装在回调函数中返回给客户端。
• 客户端在接收到响应后，会自动执行回调函数，并将返回的数据传递给该函数，从而实现了跨域请求。

下面是一个简单的JSONP示例：

function jsonpCallback(data) {
  // 处理返回的数据
  console.log(data);
}

var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=jsonpCallback';
document.body.appendChild(script);

在上面的示例中，通过动态创建<script>标签请求了https://api.example.com/data这个URL，并指定了回调函数为jsonpCallback。服务器接收到请求后，将返回的数据包装在jsonpCallback()函数中，并作为JavaScript代码返回。客户端接收到响应后，会执行jsonpCallback()函数，并传递返回的数据作为参数。

由于<script>标签的特性，它不受同源策略的限制，可以从任何域加载资源。这就使得JSONP能够在不同域之间传递数据，实现跨域请求的效果。

需要注意的是，JSONP存在一些安全风险，因为它要求目标域的服务器能够信任并正确处理回调函数。如果服务器存在漏洞或恶意代码，可能导致安全问题。

因此，在使用JSONP时，需要确保目标域的服务器是可信的，并且对传递的数据进行适当的验证和过滤。另外，现代的Web开发中，通常更推荐使用CORS（跨域资源共享）来实现跨域请求，因为它更为灵活和安全。

5. 什么是CORS（跨域资源共享）？请解释一下CORS的工作原理。

CORS（跨域资源共享）是一种机制，用于允许在一个域名下的网页应用程序访问另一个域名下的资源。

它是为了增加Web应用程序的安全性而设计的。CORS的工作原理如下：

1. 当浏览器发起跨域请求时，会在请求头中添加一个Origin字段，该字段指示请求的源（即发起请求的域名）。
2. 服务器接收到请求后，会检查Origin字段，并在响应头中添加一个Access-Control-Allow-Origin字段，该字段指示允许访问资源的域名。
3. 如果服务器允许该域名访问资源，就会在响应头中添加其他的CORS相关字段，如Access-Control-Allow-Methods（允许的HTTP方法）、Access-Control-Allow-Headers（允许的请求头）、Access-Control-Allow-Credentials（是否允许发送凭据）等。
4. 浏览器接收到响应后，会检查响应头中的Access-Control-Allow-Origin字段，如果该字段的值与请求的源匹配，就会将响应交给网页应用程序处理，否则会抛出一个错误。

通过这种方式，CORS机制可以限制跨域请求的访问范围，从而保护用户的数据安全和隐私。

6. 如何在前端使用CORS进行跨域请求？请提供一个简单的示例。

在前端使用CORS（跨域资源共享）进行跨域请求相对于JSONP更为常见和推荐。CORS通过在服务器端设置响应头来控制是否允许跨域请求，而不需要通过动态创建<script>标签。

要在前