一文讲通跨域
文章目录
- 跨域
- 产生原因
- what is same origin policy???
- why same origin policy???
- 解决方案
- 避免不同源，静态资源与api部署在同一台服务器
- CORS(Cross-Origin-Resource-Sharing) - 跨域资源共享
- 借助node代理服务器（webpack,vite打包部署的底层原理）
- 借助nginx反向代理
- others
- 使用场景
- 开发 - node代理服务器
- 部署发布 - nginx反向代理服务器
- why node server & nginx server???just use same domain & CORS is fine???
- 1.node代理服务器
- 2.nginx反向代理服务器
- 3.安全和流量控制
跨域
跨域是针对浏览器的
产生原因
what is same origin policy???
浏览器的同源策略，一个项目启动后，浏览器会先向静态资源服务器（如CDN服务器）请求页面进行页面渲染，之后根据需要向数据资源服务器（api服务器）请求数据进行数据渲染，在以前使用jsp,asp,php等技术进行统一开发时这俩服务器其实是同一个，那么便不会产生跨域问题，因为它们是同源的。然而随着技术发展，现在一般都采用前后端分离进行项目开发，这时静态资源服务器与api服务器往往是不同源的，这时候便产生了跨域问题。
同源指的是**协议（protocol）、主机地址（host）、端口（port）**都相同
why same origin policy???
限制源与源之间的资源交互，可以作为攻击防护，避免XSS攻击等
解决方案
避免不同源，静态资源与api部署在同一台服务器
CORS(Cross-Origin-Resource-Sharing) - 跨域资源共享
- 简单请求 配置Access-Control-Allow-Origin
- 非简单请求 配置Access-Control-Allow-Origin,…
借助node代理服务器（webpack,vite打包部署的底层原理）
- 创建代理服务器
- 使用http-proxy-middleware中间件
- 配置pathRewrite
- changeOrigin
- …
webpack配置devServer.proxy
vite配置vite.config.js
Q:那node服务器不会导致浏览器产生跨域问题吗？
A:会的，一般node会与静态资源部署在同一个服务器，也就是使用了避免不同源策略
之后借助node向api服务器获取数据，node作为一个程序，不会产生跨域
借助nginx反向代理
Q:那nginx服务器不会造成浏览器跨域问题吗？
A:也会的，所以会在nginx中采用CORS
others
不推荐
- jsonp
- postMessage
- websocket
使用场景
开发 - node代理服务器
部署发布 - nginx反向代理服务器
why node server & nginx server???just use same domain & CORS is fine???
跨域都要从服务器层面解决，单纯为了解决跨域问题的话实际上就两种方法，一个是静态资源和api部署在同一个服务器，一个是api服务器开启CORS
那么为什么还要node代理服务器和nginx反向代理服务器这两种方法呢？
1.node代理服务器
前后端不分离的不需要说，前后端分离的产生跨域问题可以单纯使用CORS，
开发阶段，前端服务器端口可能不固定，有时常用端口被占用要开新的，需要后端配合改CORS，直接使用node做代理更方便
2.nginx反向代理服务器
- 上线时，不可能把多个端口直接暴露给外网。
- 一般用 Nginx 做统一入口：
/api转发到后端服务。/返回前端静态资源。- 对客户端来说就是同一个域名。
- 另外，Nginx 还能做 SSL、缓存、压缩、负载均衡 等。
3.安全和流量控制
- 代理层可以做请求过滤、限流、黑名单等安全策略。
- 如果单靠 CORS 或同源部署，就缺少这些额外的保护。
👉 所以总结：
- 只看跨域：确实冗余。
- 看真实生产环境：代理层很必要，因为它顺便解决了很多运维、性能和安全问题。