跨域的四种方式

小鱼儿 2022-03-07 06:52 294阅读 0赞

本文主要是关于跨域的几种方式，关于什么是跨域这里就不多说了，写这个也是为了记住一些知识点的。

## 一. 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做反向代理配置方法实例图文教程][iis7.5]

## 四.使用websocket ##

websocket和http都是基于tcp的应用层协议，websocket协议和tttp协议的主要区别是websocket支持跨域，建立的是长连接，连接是双向的。我自己用c\#和nodejs的socket.io写过一些demo，但是没有在实际工作中用过，所以对这一块了解不深。

[iis7.5]: https://www.cnblogs.com/pengcc/p/4329207.html