前端跨域如何解决？

Posted 2023-03-19

参考技术A

什么是跨域？
跨域是通俗的说是从一个域名去请求另一个域名的资源。比如从 www.baidu.com 页面去请求 www.taobao.com 的资源。
跨域严格一点来说：两个域名只要协议，域名，端口中只要有一个不同，就被成为跨域

浏览器为什么要限制跨域？
只有同域才可以拿到存在cookie中的信息，防止坏人随意拿到我们的信息去做坏事

在团队的配置中，我们为了减少前端对后端的依赖，提高开发效率，使前后端职责更清晰等等因素，我们不得不面对跨域的问题，那我们该怎么解决呢？

1、 JSONP
原理：浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行，所以通过动态插入script标签即可达到跨域的请求
特点：数据为json格式
缺点：不能post

2、 CORS
原理 ： cors(Cross-Origin Resource Sharing)是 W3C CORS 工作草案 ，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否
特点 ：是 JSONP 模式的现代版。支持更多的请求方式，XMLHttpRequest
缺点：需后端配合修改，现代浏览器支持cors，老浏览器依旧要用JSONP

3、 PROXY
原理：proxy代理用于将请求拦截，然后通过服务器来发送请求，然后再将请求的结果传递给前端

node通常用 node-http-proxy 即可

proxy太通用了，weblack-dev-server里已集成，使用时直接配置即可 webpack-dev-server proxy代理