跨域最佳实践

之前在工作中, 有过几次需要跨域的场景, 统一总结在这里吧.

CORS

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。MDN

我所理解的跨域应当是一个浏览器的安全手段, 因为在某些条件下, 允许跨域可能会使得某些恶意应用通过一些手段造成恶意攻击不要再问我跨域的问题了, 也就是所谓的 CSRF 攻击. 另外跨域还可能存在在 dom 查询上, 例如如果允许跨域的话, 就会允许另一个进程的网页通过 dom 查询访问到特定 url 的 dom, 这样可能会造成很多恶性的后果.

但是跨域的限制方其实一直都是浏览器支持的, 这一点非常的重要, 因为有些浏览器其实是没有跨域限制的, 例如小程序环境, 小程序的开发模拟环境, 甚至 HBuilderX 里面浏览器插件, 这些环境的做法, 都是直接允许跨域的, 但是在标准的浏览器中: chrome, firefox, safari 都是需要不允许跨域的. 我之前在微信小程序的时候, 一个是访问后端服务接口, 另一个是需要访问到腾讯地图的 webservice api, 但是都没有跨域的问题, 在最近将 uni-app 小程序迁移到 h5 之后, 所有问题都爆发了, 然后才开始深入了解跨域的问题, 以及解决跨域的一些 hack 手段及正规的跨域方式.

访问后端接口

我在实现访问后端跨域接口的问题上陆续有些经验. 在最开始做自己的项目也有过同样的跨域问题, 场景大概是将本地端口 8080 的前端项目访问到后台的本地端口 80, 一般是 localhost:3000/api 这样一个链接. 当时应该是直接在后端做跨域支持的. 这个方法是在后端的 response 的 header 上加上 asscess-control-allow-origin 上加上需要跨域的域名, 当时