返回
轻松玩转前后端分离部署中的跨域问题
前端
2023-12-29 11:31:55
写在最前
跨域的始作俑者是浏览器制定的同源策略 ：下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例：
| URL | 结果 | 原因 |
|---|---|---|
| http://store.company.com/dir/otherpage.html | 同源 | 主机、端口和协议相同 |
| http://anothercompany.com/dir/page.html | 跨源 | 主机不同 |
| http://store.company.com/dir/page.html | 跨源 | 端口不同 |
| https://store.company.com/dir/page.html | 跨源 | 协议不同 |
同源策略规定，来自不同源的脚本无法访问彼此的 DOM 对象。它旨在保护用户免受恶意网站的攻击，这些网站可能会窃取敏感信息或破坏用户体验。
前后端分离部署的跨域问题
在前后端分离架构中，前端（通常是运行在客户端的 JavaScript 代码）和后端（通常是运行在服务器上的代码）通常部署在不同的域上。这可能会导致跨域问题，因为浏览器会阻止来自不同源的后端服务器的请求。
解决跨域问题的方案
解决跨域问题的方案有很多，包括：
- CORS (跨域资源共享) ：CORS 是 W3C 制定的一个标准，它允许浏览器在不同源之间发送和接收 HTTP 请求。服务器需要设置 CORS 响应头来允许跨域访问。
- JSONP (JSONP) ：JSONP 是一个黑客技术，它利用