本文主要是关于跨域的几种方式,关于什么是跨域这里就不多说了,写这个也是为了记住一些知识点的。
一. jsonp
jsonp的跨域方式很容易理解,页面的的每一个script标签浏览器都会发送get请求获取对应的文本资源,获取到了之后,会将获取回来的脚本直接执行,jsonp就是利用这个原理,在服务器写一个接口,接收请求的参数和结果回调的函数,在请求接口前应该要事先定义好要回调的函数,通过script标签请求之后得到的script会直接执行,大概的流程如下:
// 浏览器端,已经定义好了函数Afunction A(str) { console.log(str);}//服务器端function getData(method) { return method + '("Hello Jsonp")';}浏览器端会动态添加某个script标签请求这个script标签返回的就是 A("Hello Jsonp")会立即执行这个函数,A("Hello Jsonp")里面的"Hello Jsonp"就是实际要取的数据
二.Cors
这种跨域方式需要后端的支持,需要在后端返回接口之前设置返回的头部Access-Control-Allow-Origin
具体的实现方法要根据你用的后端的方法来设置,我用的是asp.net mvc,实现的方法有很多,其中实现的一个方法如下:1、创建一个attributepublic class AllowCrossSiteJsonAttribute : ActionFilterAttribute{ public override void OnActionExecuting(ActionExecutingContext filterContext) { filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*"); base.OnActionExecuting(filterContext); }}2、应用到Controller中的Action[AllowCrossSiteJson]public ActionResult YourMethod(){ return Json("data");}
三.配置服务器反向代理
此种跨域方式需要服务器,如nginx和IIS的支持,nginx的反向代理我不是很了解,网上看的别人的配置是这样的,有需要的可以了解一下:
// proxy服务器server { listen 80; server_name www.domain1.com; location / { proxy_pass http://www.domain2.com:8080; #反向代理 proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名 index index.html index.htm; # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用 add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时,可为* add_header Access-Control-Allow-Credentials true; }}
IIS的话,可以参考一下这个
四.使用websocket
websocket和http都是基于tcp的应用层协议,websocket协议和tttp协议的主要区别是websocket支持跨域,建立的是长连接,连接是双向的。我自己用c#和nodejs的socket.io写过一些demo,但是没有在实际工作中用过,所以对这一块了解不深。