CROS跨域问题的解决

转载：
作者：小丞同学
链接：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.浏览器开启跨域（不推荐）#

这种方法还是不建议了，由于跨域问题是浏览器的策略引起的，因此我们可以想办法关闭浏览器跨域的限制
怎么关闭，自己找找，关了难免会出什么问题，日后可能忘记开回来啥的，不大好