跨域访问的面试题

嘿写bug呢
83 阅读4分钟

1.认识跨域访问

什么是跨域访问

  • 跨域问题通常是由浏览器的同源策略（Same-Origin Policy, SOP）引起的访问问题。Ø同源策略是浏览器的一个重要安全机制，它用于限制一个来源的文档或脚本如何能够与另一个来源的资源进行交互。
  • 同源策略的定义：同源策略要求两个URL必须满足以下三个条件才能认为是同源：
    • 协议（Protocol）：例如，http和https是不同的协议。
    • 主机（Host）：例如，www.example.com和api.example.com是不同的主机。
    • 端口（Port）：例如，默认的8080和8081端口被认为是不同的端口。
    • 只有当两个URL的协议、主机和端口都相同时，才被认为是同源。否则，浏览器会认为它们是跨域的。

跨域问题的产生和前后端分离的发展密切相关。

  • 在早期，服务器端渲染的应用通常不会有跨域问题，因为前端代码和后端API都是在同一个服务器上运行的。
  • 随着前后端分离的出现，前端代码和后端API经常部署在不同的服务器上，这就引发了跨域问题。
  • 例如，一个网站的静态资源（HTML、CSS、JavaScript）可能部署在www.example.com上，而API接口则部署在api.example.com上。
  • 浏览器在发现静态资源和API接口不在同一个源时，就会产生跨域问题。

所以，在静态资源服务器和API服务器（其他资源类同）是同一台服务器时，是没有跨域问题的。

2.方案

  • 方案一：静态资源和API服务器部署在同一个服务器中；
  • 方案二：CORS，即是指跨域资源共享；
  • 方案三：本地node代理服务器（Webpack/Vite中就是它）；
  • 方案四：Nginx反向代理；

3.CORS方案

源资源共享（CORS，Cross-Origin Resource Sharing跨域资源共享）：
Ø它是一种基于httpheader的机制；
Ø该机制通过允许服务器标示除了它自己以外的其它源（域、协议和端口），使得浏览器允许这些origin 访问加载自己的资源。

设置的解释：
ØAccess-Control-Allow-Origin：允许所有域名访问（你也可以指定特定的域名，例如'http://example.com'）。
ØAccess-Control-Allow-Methods：允许的HTTP请求方法。ØAccess-Control-Allow-Headers：允许的HTTP请求头。

4.Vite、Webpack

image.png

  • 其实不管是Webpack，还是Vite，它们底层都是利用开启一个新的Node服务器代理来解决跨域的。
  • 那么Vite、Webpack它们的底层原理如下：
    • 创建开发服务器：Ø使用Node.js的http模块创建一个本地开发服务器，监听特定端口（如3000）。Ø这个开发服务器负责处理所有的前端请求，包括静态文件、热模块替换（HMR）、API代理等。
    • 使用http-proxy实现代理：ØVite或者Webpack使用http-proxy或httpproxy-middleware来创建代理中间件。Ø代理中间件会拦截特定路径的请求，并将这些请求转发到目标服务器。

5.Nginx跨域访问

  • 我们在Nginx中实现跨域访问，可以分成两种情况：
    • 情况一：Nginx代理了静态资源和API服务器

image.png * 情况二：Nginx仅仅代理API服务器

image.png

6.面试常见问题

描述在开发过程中遇到的跨域问题，并解释导致跨域问题产生的原因

在开发过程中我们的解决方案主要有如下几种：

  • CORS设置

    • 让后端开发在测试服务器上配置CORS（跨域资源共享）策略。
    • 这通常涉及在后端响应头中添加Access-Control-Allow-Origin。
    • 例如，设置为*可以允许所有域的访问，或者指定特定的域名来限制访问只允许来自这些域的请求。

  • 在Vite或Webpack中配置

    • 通过前端开发工具如Vite或Webpack配置代理。
    • 这些工具的底层实现通常使用了如http-proxy等库，可以在本地开发环境中代理API请求到指定的后端服务，从而绕过浏览器的同源策略。

  • 当然还有线上环境可以使用nginx

avatar
文章
阅读
粉丝