Skip to content

转载:

作者:小丞同学
链接:https://www.zhihu.com/question/452543297/answer/2247177767
来源:知乎

在前后端交互的过程中,经常会遇到跨域的问题,在我们使用 React 、Vue 这些脚手架来搭建项目时,我们可以很方便的通过配置代理来解决跨域的问题,但是在我们初学前端时,这个问题真的是非常棘手的。

首先跨域是由于浏览器的同源策略引起的,它是浏览器的安全功能,为了防止 XSS、CSRF 攻击。所谓的同源指的是 协议、域名、端口三者的相同,即使两个域名指向同一台服务器这也属于非同源

1. Jsonp 解决跨域(不推荐)

这其实利用的是 HTML 标签的一个漏洞来解决的

有三个标签是允许跨域加载资源的 Img 、link 、script 标签

Jsonp 就是利用 script 标签来跨域加载资源,但是这种方法需要后端服务器的配合才能实现,同时只支持 Get 请求

  1. 首先我们在前端中需要声明一个回调函数
  2. 通过 params 传参的方式,将我们的请求参数拼接在 url 路径上
  3. 将 url 加到 script 标签的 src 属性上
  4. 服务器也需要专门针对于这种请求方式进行接收和特殊的处理,才能得到结果

因此如果纯前端的话,是无法通过 Jsonp 来解决跨域问题的

2. 实现 CORS (推荐)

这种方法是最简单的,只需要后端服务器中配置 Access-Control-Allow-Origin 就可以开启 CORS ,可以设置哪些域名可以访问资源,这样就没有前端什么事了,

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

3. Nginx 反向代理(推荐)

如果是前后端分离的项目,我们可以在前端服务器的 Nginx 配置中,配置代理

前端先在配置 baseUrl 时,请求前端服务器,并且添加一个可标识的后缀,例如 /api

在前端服务器上配置

4.浏览器开启跨域

这种方法还是不建议了,由于跨域问题是浏览器的策略引起的,因此我们可以想办法关闭浏览器跨域的限制

怎么关闭,自己找找,关了难免会出什么问题,日后可能忘记开回来啥的,不大好