前端的跨域问题理解

Posted 2023-03-22

参考技术A 前端真的的是乱的一笔。--来自ios开发者的一声哀鸣

需要把前端看成两部分，一部分是页面，另一部分是接口（或者加数据资源）。前端页面中调接口是有限制的，同源策略(SOP)要求我们调用的接口必须和页面在同一域名下，说是为了保证数据的安全。所谓同源：协议+域名+端口

但实际情况是，在前后端分离的大趋势下，好多页面和接口的服务器分布在不同的域名下。比如在开发时，前端页面分为本地环境、测试环境、仿真环境、正式环境，而接口也分为测试环境、仿真环境、正式环境，当然也可以有本地环境。他们在不同的域名下或IP下或者端口下，是不同源的。或者平时我们也能遇到需要调用不同的服务器数据资源。显然，同源策略保障了部分安全的同时，给开发造成了很多的麻烦。

所以，跨域问题是每个前端绕不过去的坎儿。

解决办法有两个方向，一个是前端解决，一个是服务端接口解除限制。

前端解决就是通过jsonp、jquery ajax、axios配置代理等。还有个简单的，比如Mac用户，可以使用Charles工具设置代理，临时使用。
服务端解决可以通过nginx反向代理设置允许跨域请求的域名、或者设置Access-Control-Allow-Origin，允许跨域资源共享等。
具体解决方案可参考 https://segmentfault.com/a/1190000011145364

反观iOS，轮廓简直不要太清晰，大部分时候只用专注于开发，没有各种乱七八糟的事情。

前端请求接口出现的跨域问题

1.针对跨域问题可以使用jsonp的方式解决

2.可以使用header头来定义

header(‘Access-Control-Allow-origin:*‘);
header(‘Access-Control-Allow-Credentials:true‘);
header(‘Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS‘);
header(‘Access-Control-Allow-Headers:Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With‘);
header(‘Content-Type: text/html; charset=utf-8‘);

加上以后就可以了

但是这个缺陷是IE10以下的不支持！一般手机应用都可以用！