前端开发的跨域问题

跨域背景 跨域是由于浏览器的同源策略引起的；那么什么是同源策略呢？ 同源策略是指页面请求的接口地址必须与 url 地址处于同域上：即域名，协议，端口号都相等。同源策略的目的是为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。 同源策略的出发点是好的，想法也很好，但是在做项目开发的时候往往给前端开发者带来麻烦。因为在页面开发的时候，静态资源是放在本地电脑上的，访问这些资源都是通过IP（类似于127.0.0.1）或者localhosts来访问的；这就与线上服务器所在的域名不符，不能顺利进行接口调用。 跨域解决方案 JSONP：利用script标签可跨域的特点，在跨域脚本 中可以直接回调当前脚本的函数。JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个 callback 或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。 但是JSONP也有明显的缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。 CORS：服务器设置HTTP响应头中Access-Control-Allow-origin值，解除跨域限制 CORS的缺点：先做一个预检，再发真实的请求，发了两次请求会有性能上的损耗 以上两种方法都很依赖后端的协助；而且，即使有些时候后端乐意帮忙，某些接口也不能随便开放（线上正式环境的接口）。所以，解决跨域问题不能仅仅依赖后端的帮助，前端也需要有独立解决跨域的方案：代理与反代理 代理与反代理 代理：也称之为正向代理，是指一个位于客户端和目标服务器之间的服务器，为了从目标服务器取得内容，客户端向代理发送一个请求并指定目标服务器，然后代理向目标服务器转交请求并将获得的内容返回给客户端 数据流程： 数据请求过程：浏览器 => 代理服务器 => 目标服务器 数据返回过程：目标服务器 => 代理服务器 => 浏览器 反向代理：是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器 数据请求过程：浏览器 => 反向代理服务器 => 处理数据的服务器 数据返回过程：处理数据的服务器 => 反向代理服务器 => 浏览器 区别：正向代理是浏览器端进行配置的，与服务器端无关，甚至可以对服务器端隐藏；而反向代理是服务器端配置的，对浏览器端是透明的 利用正向代理实现跨域 实现原理：对正向代理服务器进行配置，当获取非接口数据时，让代理服务器指向开发者本机的资源。当访问接口时，访问后端接口数据。 运行过程： 浏览器访问页面，假设访问淘宝页面：taobao.com/index.html（假设这个页面中调用了taobao.com/api/getNew获取最新商品的接口） taobao.com/index.html请求经过代理服务器，根据配置，index.html页面请求127.0.0.1:3000 127.0.0.1:3000返回index.html文件给浏览器。 浏览器运行index.html页面，发起taobao.com/api/getNew请求。 taobao.com/api/getNew请求经过代理服务器，但由于没有对这个接口进行特殊配置，这个接口会正常访问道淘宝服务器。 淘宝服务器接受到taobao.com/api/getNew请求，检查请求头的hosts字段，发现是taobao.com，没有跨域，将结果返回给代理服务器。 代理服务器拿到结果，返回给浏览器，浏览器进行解析显示。 利用反向代理服务器 实现原理：原理大体相同，但是处理的端不同，反向代理是在服务器端进行处理。首先修改hosts文件，将域名指向开发者的电脑本身，把自己伪装成服务端，再通过nginx对不同的请求进行转发，把静态资源指向开发者本地电脑的资源，将接口指向实际的服务器。 运行过程： 浏览器访问页面，假设访问淘宝页面：taobao.com/index.html taobao.com域名解析先经过hosts文件配置，发现taobao.com域名指向127.0.0.1，则向本机发起请求。 nginx接收到taobao.com/index.html请求，根据nginx的配置，将把这个请求转发给127.0.0.1:3000。 浏览器运行index.html文件，发起taobao.com/api/getNew请求 nginx接收到taobao.com/api/getNew请求请求，根据nginx的配置，将把这个请求转发给真正的淘宝服务器中。 淘宝服务器将数据返回给nginx，再返回给浏览器执行。

本文章由javascript技术分享原创和收集