uni-app之浏览器跨域问题解决方案

Chrome调试跨域问题解决方案

1.跨域CORS(Cross-Origin Resource Sharing)

当两个域具有相同的协议(如http)、相同的端口(如80)、相同的host（如www.google.com)，那么我们就可以认为它们是相同的域（协议，域名，端口都必须相同）。跨域就指着协议，域名，端口不一致，出于安全考虑，跨域的资源之间是无法交互的(例如一般情况跨域的JavaScript无法交互，当然有很多解决跨域的方案)。

2.# Cross-Origin Resource Sharing协议介绍

说明：传统的Ajax请求只能获取在同一个域名下面的资源，但是HTML5打破了这个限制，允许Ajax发起跨域的请求。浏览器是可以发起跨域请求的，比如你可以外链一个外域的图片或者脚本。但是Javascript脚本是不能获取这些资源的内容的，它只能被浏览器执行或渲染。

• 在Flash和Silverlight中，服务器需要创建一个crossdomain.xml的文件来允许跨域请求。如果这个文件声明“http://your.site”允许来自“http://my.site”的请求，则来自“http://my.site”的请求可以访问所有“http://your.site”的文件。这是一种整个站点层面上的控制模式，要么你允许一个外域的站点访问，要么拒绝；站点的crossdomain.xml文件是最早被浏览器获取并分析的。如果一个外域的站点不允许被访问，浏览器压根就不会发出跨域请求。.
• CORS不一样，它是页面层次的控制模式。每一个页面需要返回一个名为‘Access-Control-Allow-Origin’的HTTP头来允许外域的站点访问。你可以仅仅暴露有限的资源和有限的外域站点访问。在COR模式中，访问控制的职责可以放到页面开发者的手中，而不是服务器管理员。当然页面开发者需要写专门的处理代码来允许被外域访问。
  另一主要区别：某个站点的crossdomain.xml文件是最早被浏览器获取并分析的。如果一个外域的站点不允许被访问，浏览器压根就不会发出跨域请求。COR则相反，Javascript先发出跨域请求，然后检查回复的‘Access-Control-Allow-Origin’头。如果这个头允许该外域访问，则Javascript可以读取这个回复，否则就被禁止访问。如果请求不是一个简单的COR，则向外域服务器发送预检验请求，如果回复的头部允许访问，则发送跨域请求，否则禁止。

3 解决资源跨域的策略

3.1 服务器端使用Access-Control-Allow-Origin

备注：Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。通过服务器端返回带有Access-Control-Allow-Origin标识的Response header，用来解决资源的跨域权限问题。
(1) 在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息

• Access-Control-Allow-Origin: * //允许所有域名的脚本访问该资源
• Access-Control-Allow-Origin:www.google.com //允许特定的域名访问
  如PHP添加响应头信息：

header("Access-Control-Allow-Origin: *");

(2) 如果资源是html页面，可以设置

备注：客户端仅仅是为了本地预览，可以使用谷歌浏览器Chrome插件Allow-Control-Allow-Origin: * 来协助调试。使用Chrome浏览器直接打开插件地址在线安装即可。本插件只能解决简单请求的跨域调试。对于非简单请求的OPTION预检以及线上服务器也有跨域需求的用户，可以[服务端配合解决。