面试题答案
一键面试1. JSONP
- 原理：利用
<script>标签没有跨域限制的特性，通过动态创建<script>标签，向服务器请求数据，服务器返回一个包含函数调用的 JavaScript 代码，该函数由前端页面定义，从而实现数据传递。 - 适用场景：适用于简单的跨域数据获取场景，主要用于 GET 请求。
- 优点：兼容性好，几乎所有浏览器都支持。实现简单，不需要复杂的服务器配置。
- 缺点：只支持 GET 请求，无法用于 POST 等其他类型请求。安全性较差，容易受到 XSS 攻击，因为返回的是 JavaScript 代码，恶意脚本可能被注入。
2. CORS（跨域资源共享）
- 原理：服务器通过设置响应头，告诉浏览器哪些源可以访问该资源。浏览器在请求时，自动添加一些请求头信息，服务器根据这些信息决定是否允许跨域请求。对于复杂请求（如非简单请求，例如使用 PUT、DELETE 方法，或者包含自定义请求头的请求），浏览器会先发送一个预检请求（OPTIONS），服务器响应通过后，才会发送真正的请求。
- 适用场景：适用于现代浏览器环境下的各种跨域请求场景，支持各种请求方法。
- 优点：支持各种请求方法，安全性较高，通过服务器配置可以精确控制允许的跨域源。
- 缺点：需要服务器端进行配置，对于不支持 CORS 的旧浏览器（如 IE9 及以下）无法使用。
3. 代理服务器
- 原理：在客户端和服务器之间搭建一个代理服务器，客户端向代理服务器发送请求，代理服务器再向目标服务器转发请求，并将响应返回给客户端。由于代理服务器和目标服务器在同一域下，不存在跨域问题。
- 适用场景：适用于各种跨域场景，尤其是在无法直接在服务器端配置 CORS 或者需要对请求进行一些预处理的情况。
- 优点：可以对请求和响应进行中间处理，如缓存、鉴权等。不需要修改浏览器端代码，兼容性好。
- 缺点：增加了服务器部署和维护的复杂度，需要额外的服务器资源来运行代理服务器。性能可能受到影响，因为多了一层转发。
4. Nginx 反向代理
- 原理：Nginx 作为反向代理服务器，接收客户端请求，根据配置将请求转发到不同的后端服务器。通过 Nginx 的配置，可以设置跨域相关的响应头，实现跨域访问。例如，可以在 Nginx 的配置文件中添加
add_header Access-Control-Allow-Origin *;等指令来允许跨域。 - 适用场景：适用于使用 Nginx 作为 Web 服务器的项目，方便在 Nginx 层面统一处理跨域问题。
- 优点：配置简单，在 Nginx 层面统一处理跨域，不影响后端应用逻辑。性能高，Nginx 本身具有高性能的特点。
- 缺点：依赖 Nginx 服务器，如果项目没有使用 Nginx 则需要额外部署。对于复杂的跨域配置需求，可能需要一定的 Nginx 配置经验。