一、什么是跨域?什么是同源策略?
跨域问题通常是由浏览器的同源策略(Same-Origin Policy,SOP)引起的访问问题。
同源策略是浏览器的一个重要安全机制,他用于限制一个来源的文档或脚本如何能够与另一个来源的资源进行交互。
当两个URL的协议、主机(Host)、端口都相同时才被认为是同源。
在早期,服务器渲染的网站不会有跨域问题。随着前后端分离的出现,前端代码和后端API经常部署在不同的服务器上,就会引发跨域问题。
CORS(Cross-Origin Resource Sharing,跨域资源共享)
它使用额外的HTTP头来告诉浏览器允许从其他域加载资源。
通过CORS,服务器可以显示声明哪些源站点有权限访问它的资源。
预请求和实际请求:
对于复杂请求(如PUT、DELETE或者自定义头),浏览器会先发一个OPTIONS请求,询问服务器是否允许跨域请求。
服务器如果允许跨域,响应会包含CORS信息。
如果预请求被允许,浏览器会发送实际请求,并在请求头总包含一些CORS的信息。
在日常的开发中我们普遍使用的还是正向代理的方式。
在webpack、vite中配置代理。
export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), } }, }, })
它们底层是开启一个新的Node服务器代理来解决跨域的。
Vite 或者 Webpack 使⽤ http-proxy 或 http-proxy-middleware 来创建代理中间件。
生产环境一般使用Nginx做反向代理。如果Nginx只代理API服务器,需要在Nginx配置中添加CORS信息。(Access-Control-Allow-Origin等)
正向代理:
代表客户端,向服务端发起请求。客户端知道代理的存在,服务端可能不知道真实的发起者。
反向代理:
代表服务端,接收来自客户端的请求。服务端知道代理的存在,客户端不知道真实的服务端。(负载均衡、防火墙、压缩)