跨域的四种体式格局

2019年8月31日 124次阅读 来源: 上帝遗忘之子

本文主如果关于跨域的几种体式格局，关于什么是跨域这里就不多说了，写这个也是为了记着一些知识点的。

一. jsonp

jsonp的跨域体式格局很轻易明白，页面的的每个script标签浏览器都邑发送get要求猎取对应的文本资本，猎取到了以后，会将猎取返来的剧本直接实行，jsonp就是应用这个道理，在服务器写一个接口，吸收要求的参数和效果回调的函数，在要求接口前应当要事前定义好要回调的函数，经由过程script标签要求以后获得的script会直接实行，也许的流程以下：

// 浏览器端，已定义好了函数A
function A(str) {
  console.log(str);
}

//服务器端
function getData(method) {
  return method + '("Hello Jsonp")';
}

浏览器端会动态增加某个script标签
<script src="....../getData?method=A"></script>
要求这个script标签返回的就是 A("Hello Jsonp")
会马上实行这个函数，A("Hello Jsonp")内里的"Hello Jsonp"就是现实要取的数据

二.Cors

这类跨域体式格局须要后端的支撑，须要在后端返回接口之前设置返回的头部Access-Control-Allow-Origin
详细的完成要领要根据你用的后端的要领来设置，我用的是asp.net mvc，完成的要领有许多，个中完成的一个要领以下：

1、竖立一个attribute
public 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的话，能够参考一下这个iis7.5做反向代办设置要领实例图文教程

四.运用websocket

websocket和http都是基于tcp的应用层协定，websocket协定和tttp协定的重要区别是websocket支撑跨域，竖立的是长衔接，衔接是双向的。我本身用c#和nodejs的socket.io写过一些demo，然则没有在现实工作中用过，所以对这一块相识不深。

    原文作者：上帝遗忘之子
    原文地址: https://segmentfault.com/a/1190000018266689
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞