一个人开发网页时候是后台和前台可能在一个上面一起开发的这时候基本没什么问题。两个人开发一个网站的时候,经常会前端和后端一起开发,尤其是单页应用的开发。这时候就会遇到一个问题:两个开发环境肯定不再同一个域(当协议、子域名、主域名、端口号中任意一各不相同时,都算不同的“域”。不同域之间请求就是“跨域”。)下,ajax请求不能用,但是前端数据渲染是需要后端接口提供数据的。这时候就出现了用到了ajax跨域技术。

基本上有这么几种:

1 代理

比如a.com下的前端需要b.com下的数据,我们可以在a.com下创建一个代理程序(使用php,nodejs ,py等都可以,如果你不会后端语言,直接使用nginx代理也可以。),用来访问b.com下的资源然后返回给a.com的前端。这种跨域实现方式最简单,成本比较高,但是他也有他自己不可取代的优点,比如:你的网站的一些服务需要调用别人服务器接口,别人服务器又不支持其他方式跨域,你就需要这种方式去实现跨域数据调用,比如我的项目里面的:书享bilibili视频地址提取 就是使用这种方式实现的。

2JSONP

同上面的场景。使用jsonp跨域的方法我们可以这么解决:

在a.com前端页面中声明一个js函数

function test(data){
 console.log(data);
}
<script src="//b.com/test.js"></script>

b.com下的test.js里面是这样的:

test({test:"你好啊"})
我们运行页面打开控制台刷新页面就可以看到控制台输出了test.js 的参数内容。这就成功的跨域了。 但是总觉得少点什么,喵喵喵??是不是觉得太简单。的确是这样。一般使用时候我们都会见到这种
<script src="//b.com?callback=test&charset=utf8&b=xxx&balabal=2333"></script>
因为前面那个固定的太死了局限性很大但是我们可以通过后台程序动态生成test.js的内容,同时还可以传递一些数据,但是jsonp使用仅仅在GET方式下使用所以,get方法传递的数据量是有限的,需要传递大量数据和需要使用POST的需求就不能够满足了。当使用POST请求jsonp时候会触发CORS,网上有些方法可以让jsonp支持post。但是有那时间和精力去弄不如换种方式了,比如下面的这种。 3 XHR2 “XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法,支持主流现代浏览器(ie8和ie9可以通过XDomainRequest实现)对跨域访问提供了很好的支持,并且还有一些新的功能。具体增加了什么内容呢?主要就是:
* 可以设置HTTP请求的时限。 * 可以使用FormData对象管理表单数据。 * 可以上传文件。 * 可以请求不同域名下的数据(跨域请求)。 * 可以获取服务器端的二进制数据。 * 可以获得数据传输的进度信息。

使用这个东西的话需要在服务端加一点东西。

比如php的就这样

 header("Access-Control-Allow-Origin: *");
你也可以吧*换成你指定的域名。 更多其他语言的服务端设置方法请参见:https://enable-cors.org/server.html