跨域问题是前端开发中常见且必须掌握的知识点之一。本文将详细介绍跨域的概念、手写JSONP和CORS跨域代码及其原理，如何在Vue3项目中替换Mock数据接口为真实后端数据接口，以及总结九种常见的跨域解决方案。
跨域是指浏览器因同源策略的限制，无法访问不同源（协议、域名、端口任一不同）的资源。例如，前端页面运行在 ，但需要访问 的数据时，就会遇到跨域问题。
JSONP（JSON with Padding）是一种非正式的数据传输格式，它通过 标签的 属性来实现跨域请求。因为 标签不受同源策略限制。
前端代码：
后端代码（Node.js示例）：
CORS（Cross-Origin Resource Sharing）是一种机制，它使用额外的HTTP头来告诉浏览器，允许从其他域加载资源。服务器通过设置适当的HTTP响应头，来告诉浏览器哪些域可以访问资源。
前端代码：
后端代码（Node.js示例）：
在Vue3项目中，我们可以通过修改API请求地址，将Mock数据接口替换为真实后端数据接口。
假设我们有一个Vue3项目，之前使用Mock数据：
现在，我们将其替换为真实后端接口：
然后在组件中调用：
- JSONP：通过 标签实现跨域，只支持GET请求。
- CORS：通过设置HTTP头允许跨域请求，支持复杂请求。
- 服务器代理：如使用Node.js中间件（http-proxy-middleware）或Nginx代理请求，绕过浏览器的同源策略。
- WebSocket：WebSocket协议不受同源策略限制，可以实现跨域通信。
- PostMessage：通过 实现不同窗口间的数据传递。
- 跨域资源嵌入：通过 、 、 、 等标签加载跨域资源。
- document.domain：适用于主域相同子域不同的跨域，通过设置相同的 实现。
- window.name：通过改变窗口的 属性实现跨域数据传递。
- 跨域请求伪造（CORS Preflight）：通过简单请求或预检请求绕过CORS限制。
详见上文。
详见上文。
4. WebSocket示例
后端代码（Node.js示例）：
5. PostMessage示例
6. 跨域资源嵌入示例
7. document.domain示例
8. window.name示例
9. 跨域请求伪造（CORS Preflight）示例
后端代码：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/156690.html