转载:
作者:小丞同学
链接:https://www.zhihu.com/question/452543297/answer/2247177767
来源:知乎
在前后端交互的过程中,经常会遇到跨域的问题,在我们使用 React 、Vue 这些脚手架来搭建项目时,我们可以很方便的通过配置代理来解决跨域的问题,但是在我们初学前端时,这个问题真的是非常棘手的。
首先跨域是由于浏览器的同源策略引起的,它是浏览器的安全功能,为了防止 XSS、CSRF 攻击。所谓的同源指的是 协议、域名、端口三者的相同,即使两个域名指向同一台服务器这也属于非同源
1. Jsonp 解决跨域(不推荐)
这其实利用的是 HTML 标签的一个漏洞来解决的
有三个标签是允许跨域加载资源的 Img 、link 、script 标签
Jsonp 就是利用 script 标签来跨域加载资源,但是这种方法需要后端服务器的配合才能实现,同时只支持 Get 请求
- 首先我们在前端中需要声明一个回调函数
- 通过 params 传参的方式,将我们的请求参数拼接在 url 路径上
- 将 url 加到 script 标签的 src 属性上
- 服务器也需要专门针对于这种请求方式进行接收和特殊的处理,才能得到结果
因此如果纯前端的话,是无法通过 Jsonp 来解决跨域问题的
2. 实现 CORS (推荐)
这种方法是最简单的,只需要后端服务器中配置 Access-Control-Allow-Origin 就可以开启 CORS ,可以设置哪些域名可以访问资源,这样就没有前端什么事了,
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
3. Nginx 反向代理(推荐)
如果是前后端分离的项目,我们可以在前端服务器的 Nginx 配置中,配置代理
前端先在配置 baseUrl 时,请求前端服务器,并且添加一个可标识的后缀,例如 /api
在前端服务器上配置
4.浏览器开启跨域
这种方法还是不建议了,由于跨域问题是浏览器的策略引起的,因此我们可以想办法关闭浏览器跨域的限制
怎么关闭,自己找找,关了难免会出什么问题,日后可能忘记开回来啥的,不大好