前端跨域解决方案总结

一、什么是跨域？
二、为什么会产生跨域
三、常见的跨域场景
四、9种跨域解决方案

一、什么是跨域？

在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。

二、为什么会产生跨域

因为浏览器内部有一种约定叫做同源策略它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

那么什么叫做同源策略呢？

同源策略是指在Web浏览器中，允许某个网页脚本访问另一个网页的数据，但前提是这两个网页必须有`相同的URI、主机名和端口号`，一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。此策略可防止某个网页上的恶意脚本通过该页面的文档对象模型访问另一网页上的敏感数据。

同源策略限制以下几种行为：

1、Cookie、LocalStorage 和 IndexDB 无法读取
2、DOM和JS对象无法获得
3、AJAX 请求不能发送

三、常见的跨域场景

在这里插入图片描述

四、9种跨域解决方案

1、JSONP跨域

1、概述

JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问

script 标签 src 属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

2、实现流程

1、设定一个script标签

<script src="http://jsonp.js?callback=xxx"></script>

2、callback定义了一个函数名，而远程服务端通过调用指定的函数并传入参数来实现传递参数，将fn(response)传递回客户端

$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';
echo $callback.'(.json_encode($data).)';

3、客户端接收到返回的js脚本，开始解析和执行fn(response)

3、jsonp简单实现

一个简单的jsonp实现，其实就是拼接url，然后将动态添加一个script元素到头部
jsonp的缺点：只能发送get一种请求。

1)、原生JS实现

前端示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
</head>

<body>
  <script>
    let script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://localhost:5000/login?callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
    
    
      alert(JSON.stringify(res));
    }
  </script>
</body>

</html>

2）jquery Ajax实现：

$.ajax({
    
    
    url: 'http://localhost:5000/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",  // 自定义回调函数名
    data: {
    
    }
});

3）Vue axios实现：

axios.jsonp('http://localhost:5000/login', {
    
    
    params: {
    
    },
    jsonp: 'handleCallback'
}).then((res) => {
    
    
    console.log(res); 
})

4)、后端node.js代码：

const http = require('http');
const url = require('url');

const port = 5000;
const data = {
    
     'data': 'world' };

http.createServer(function (req, res) {
    
    
  console.log(req.url)  ///login?callback=handleCallback
  const params = url.parse(req.url, true);
  console.log(params)
  /* 
  Url {
    protocol: null,
    slashes: null,
    auth: null,
    host: null,
    port: null,
    hostname: null,
    hash: null,
    search: '?callback=handleCallback',
    query: [Object: null prototype] { callback: 'handleCallback' },
    pathname: '/login',
    path: '/login?callback=handleCallback',
    href: '/login?callback=handleCallback'
  }
 */
  if (params.query.callback) {
    
    
    console.log(params.query.callback); //handleCallback
    //jsonp
    let str = params.query.callback + '(' + JSON.stringify(data) + ')';
    //handleCallback({data: "world"})
    res.end(str);
  } else {
    
    
    res.end();
  }
}).listen(port, function () {
    
    
  console.log(`Server is running at port ${
      
      port}...`);
});

2、跨域资源共享（CORS）

1、概述

Cross-origin Resource Sharing 中文名称 “跨域资源共享” 简称 “CORS”，它突破了一个请求在浏览器发出只能在同源的情况下向服务器获取数据的限制。

它允许浏览器向跨域服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

2、跨域是浏览器还是服务器的限制？

从一段示例开始
创建 index.html 使用 fetch 调用 http://127.0.0.1:3011/api/data

<body>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/fetch/3.0.0/fetch.min.js"></script> -->
  <script>
    fetch('http://127.0.0.1:3011/api/data');
  </script>
</body>

创建 client.js 用来加载上面 index.html。设置端口为 3010。

const http = require('http');
const fs = require('fs');
const PORT = 3010;
http.createServer((req, res) => {
    
    
  fs.createReadStream('index.html').pipe(res);
}).listen(PORT);

创建 server.js 开启一个服务，根据不同的请求返回不同的响应。设置端口为 3011。

const http = require('http');
const PORT = 3011;

http.createServer((req, res) => {
    
    
  const url = req.url;
  console.log('request url: ', url);
  if (url === '/api/data') {
    
    
    return res.end('ok!');
  }
  if (url === '/script') {
    
    
    return res.end('console.log("hello world!");');
  }
}).listen(PORT);

console.log('Server listening on port ', PORT);

运行上面的 client.js、server.js 浏览器输入 http://127.0.0.1:3010 在 Chrome 浏览器中打开 Network 项查看请求信息，如下所示：
在这里插入图片描述
使用 fetch 请求的 127.0.0.1:3011/api/data 接口，在请求头里可以看到有 Origin 字段，显示了我们当前的请求信息。另外还有三个 Sec-Fetch-* 开头的字段

其中 Sec-Fetch-Mode 表示请求的模式
Sec-Fetch-Site 表示的是这个请求是同源还是跨域，由于我们的请求都是由 3010 端口发出去请求 3011 端口，是不符合同源策略的.

看下浏览器 Console 下的日志信息，根据提示得知原因是从 “http://127.0.0.1:3010” 访问 “http://127.0.0.1:3011/api/data” 被 CORS 策略阻止了，没有 “Access-Control-Allow-Origin” 标头

在这里插入图片描述
在看下服务端的日志，因为请求 3011 服务，所以就看下 3011 服务的日志信息：

在服务端是有收到请求信息的，说明服务端是正常工作的。

所以最终的结论
浏览器限制了从脚本内发起的跨源 HTTP 请求，例如 XMLHttpRequest 和我们本示例中使用的 Fetch API 都是遵循的同源策略。

当一个请求在浏览器端发送出去后，服务端是会收到的并且也会处理和响应，只不过浏览器在解析这个请求的响应之后，发现不属于浏览器的同源策略（地址里面的协议、域名和端口号均相同）也没有包含正确的 CORS 响应头，返回结果被浏览器给拦截了。

3、预检请求

预检请求是在发送实际的请求之前，客户端会先发送一个 OPTIONS 方法的请求向服务器确认，如果通过之后，浏览器才会发起真正的请求，这样可以避免跨域请求对服务器的用户数据造成影响。

看到这里你可能有疑问为什么上面的示例没有预检请求？因为 CORS 将请求分为了两类：简单请求和非简单请求。我们上面的情况属于简单请求，所以也就没有了预检请求。

让我们继续在看下简单请求和非简单请求是如何定义的。

1）、预检请求定义

根据 MDN 的文档定义，请求方法为：GET、POST、HEAD，请求头 Content-Type 为：text/plain、multipart/form-data、application/x-www-form-urlencoded 的就属于 “简单请求” 不会触发 CORS 预检请求。

例如，如果请求头的 Content-Type 为 application/json 就会触发 CORS 预检请求，这里也会称为 “非简单请求”。

2）、预检请求示例

设置客户端
为 index.html 里的 fetch 方法增加一些设置，设置请求的方法为 PUT，请求头增加一个自定义字段 Test-Cors。

<script>
  fetch('http://127.0.0.1:3011/api/data', {
      
      
    method: 'PUT',
    headers: {
      
      
      'Content-Type': 'text/plain',
      'Test-Cors': 'abc'
    }
  });
</script>

上述代码在浏览器执行时会发现是一个非简单请求，就会先执行一个预检请求，

再通过控制台看一下此时的信息显示
在这里插入图片描述

可以看到有一个 OPTIONS 是预检请求使用的方法，该方法是在 HTTP/1.1 协议中所定义的，还有一个重要的字段 Origin 表示请求来自哪个源，服务端则可以根据这个字段判断是否是合法的请求源，例如 Websocket 中因为没有了同源策略限制，服务端可以根据这个字段来判断。

Access-Control-Request-Method 告诉服务器，实际请求将使用 PUT 方法。

Access-Control-Request-Headers 告诉服务器，实际请求将使用两个头部字段 content-type,test-cors。这里如果 content-type 指定的为简单请求中的几个值，Access-Control-Request-Headers 在告诉服务器时，实际请求将只有 test-cors 这一个头部字段。

此时还是处于跨域状态，因为我们并没有设置服务端。所以预检之后的请求依旧报红，显示跨域，如下图
在这里插入图片描述

为了解决跨域，现在设置服务端

上面讲解了客户端的设置，同样的要使请求能够正常响应，还需服务端的支持。

修改我们的 server.js 重点是设置 Response Headers 代码如下所示：

const http = require('http');
const PORT = 3011;

http.createServer((req, res) => {
    
    
  const url = req.url;
  console.log('request url: ', url);
  if (url === '/api/data') {
    
    
    res.writeHead(200, {
    
    
      'Access-Control-Allow-Origin': 'http://127.0.0.1:3010',
      'Access-Control-Allow-Headers': 'Test-CORS, Content-Type',
      'Access-Control-Allow-Methods': 'PUT,DELETE',
      'Access-Control-Max-Age': 86400
    });
    res.end()
  }
  if (url === '/script') {
    
    
    res.writeHead(200, {
    
    
      'Access-Control-Allow-Origin': 'http://127.0.0.1:3010',
      'Access-Control-Allow-Headers': 'Test-CORS, Content-Type',
      'Access-Control-Allow-Methods': 'PUT,DELETE',
      'Access-Control-Max-Age': 86400
    });
    res.end()
  }
}).listen(PORT);

console.log('Server listening on port ', PORT);

为什么是以上配置？首先预检请求时，浏览器给了服务器几个重要的信息 Origin、Method 为 PUT、Headers 为 content-type,test-cors 服务端在收到之后，也要做些设置，给予回应。

Access-Control-Allow-Origin 表示 “http://127.0.0.1:3010” 这个请求源是可以访问的，该字段也可以设置为 “*” 表示允许任意跨源请求。

Access-Control-Allow-Methods 表示服务器允许客户端使用 PUT、DELETE 方法发起请求，可以一次设置多个，表示服务器所支持的所有跨域方法，而不单是当前请求那个方法，这样好处是为了避免多次预检请求。

Access-Control-Allow-Headers 表示服务器允许请求中携带 Test-CORS、Content-Type 字段，也可以设置多个。

Access-Control-Max-Age 表示该响应的有效期，单位为秒。在有效时间内，浏览器无须为同一请求再次发起预检请求。还有一点需要注意，该值要小于浏览器自身维护的最大有效时间，否则是无效的。

看下增加了预检请求的效果，如第一张图，第一次先发出了 OPTIONS 请求，并且在请求头设置了本次请求的方法和 Headers 信息，服务端在 Response 也做了回应，在 OPTIONS 成功之后，浏览器紧跟着才发起了我们本次需要的真实请求，如下面第二张图所示 Resquest Method 为 PUT。

在这里插入图片描述

通过上面的方法，便可以解决跨域

4、CORS 与认证

对于跨域的 XMLHttpRequest 或 Fetch 请求，浏览器是不会发送身份凭证信息的。例如我们要在跨域请求中发送 Cookie 信息，就要做些设置：

为了能看到效果，我先自定义了一个 cookie 信息 id=NodejsRoadmap。

重点是设置认证字段，本文中 fetch 示例设置 credentials: “include” 如果是 XMLHttpRequest 则设置 withCredentials:“include”

<body>
  <script>
    document.cookie = `id=NodejsRoadmap`;
    fetch('http://127.0.0.1:3011/api/data', {
      
      
      method: 'PUT',
      headers: {
      
      
        'Content-Type': 'application/json',
        'Test-Cors': 'abc',
      },
      credentials: "include"
    });
  </script>
</body>

现在我们先不调整服务端，看一下是什么情况
通过查看控制台，发现跨域了
在这里插入图片描述

经过以上设置，浏览器发送实际请求时会向服务器发送 Cookies，但同时服务器也需要在响应中设置 Access-Control-Allow-Credentials 响应头

在这里插入图片描述
这样请求就可以正常发送了，不存在跨域了

还有一点需要注意，如果我们在请求中设置了 credentials: “include” 服务端就不能设置 Access-Control-Allow-Origin: “*” 只能设置为一个明确的地址。

5、这种方法如果后端是采用node开发的，可以使用 CORS 模块

const http = require('http');
const PORT = 3011;
const corsMiddleware = require('cors')({
    
    
  origin: 'http://127.0.0.1:3010',
  methods: 'PUT,DELETE',
  allowedHeaders: 'Test-CORS, Content-Type',
  maxAge: 1728000,
  credentials: true,
});

http.createServer((req, res) => {
    
    
  const {
    
     url, method } = req;
  console.log('request url:', url, ', request method:', method);
  const nextFn = () => {
    
    
    if (method === 'PUT' && url === '/api/data') {
    
    
      return res.end('ok!');
    }
    return res.end();
  }
  corsMiddleware(req, res, nextFn);
}).listen(PORT);

cors 在预检请求之后或在预检请求里并选项中设置了 preflightContinue 属性之后才会执行 nextFn 这个函数，如果预检失败就不会执行 nextFn 函数。

如果你用的 Express.js 框架，使用起来也很简单，如下所示：

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors());

6、补充，原生ajax和jquery的ajax

原生ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端设置是否带cookie
xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');

xhr.onreadystatechange = function() {
    
    
    if (xhr.readyState == 4 && xhr.status == 200) {
    
    
        alert(xhr.responseText);
    }
};

jquery ajax

$.ajax({
    
    
    ...
   xhrFields: {
    
    
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
    ...
});

3、nginx代理跨域

nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。

1、nginx配置解决iconfont跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下配置。

location / {
    
    
  add_header Access-Control-Allow-Origin *;
}

2、nginx反向代理接口跨域

跨域问题：同源策略仅是针对浏览器的安全策略。服务器端调用HTTP接口只是使用HTTP协议，不需要同源策略，也就不存在跨域问题。

实现思路：使用 Nginx 代理服务器之后，请求不会直接到达我们的 Node.js 服务器端，请求会先经过 Nginx 在设置一些跨域等信息之后再由 Nginx 转发到我们的 Node.js 服务端，所以这个时候我们的 Nginx 服务器去监听的 3011 端口，我们把 Node.js 服务的端口修改为 30011，简单配置如下所示：

nginx具体配置：

server {
    
    
  listen          3011;
  server_name     localhost;

  location / {
    
    
    if ($request_method = 'OPTIONS') {
    
    
      add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:3010';
      add_header 'Access-Control-Allow-Methods' 'PUT,DELETE';
      add_header 'Access-Control-Allow-Headers' 'Test-CORS, Content-Type';
      add_header 'Access-Control-Max-Age' 1728000;
      add_header 'Access-Control-Allow-Credentials' 'true';
      add_header 'Content-Length' 0;
      return 204;
    }

    add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:3010';
    add_header 'Access-Control-Allow-Credentials' 'true';

    proxy_pass http://127.0.0.1:30011;
    proxy_set_header Host $host;
  }
}

4、nodejs中间件代理跨域

node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。

1）非vue框架的跨域

使用node + express + http-proxy-middleware搭建一个proxy服务器。
前端代码：

var xhr = new XMLHttpRequest();

// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;

// 访问http-proxy-middleware代理服务器
xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();

中间件服务器代码：

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();

app.use('/', proxy({
    
    
    // 代理跨域目标接口
    target: 'http://www.domain2.com:8080',
    changeOrigin: true,

    // 修改响应头信息，实现跨域并允许带cookie
    onProxyRes: function(proxyRes, req, res) {
    
    
        res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
        res.header('Access-Control-Allow-Credentials', 'true');
    },

    // 修改响应信息中的cookie域名
    cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
}));

app.listen(3000);
console.log('Proxy server is listen at port 3000...');

2）vue框架的跨域

node + vue + webpack + webpack-dev-server搭建的项目，跨域请求接口，直接修改webpack.config.js配置。开发环境下，vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域。

详情请查看我的另一篇文章
vue项目怎样解决跨域问题呢？

5、document.domain + iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

1）父窗口：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

2）子窗口：(http://child.domain.com/a.html)

<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    console.log('get js data from parent ---> ' + window.parent.user);
</script>

6、location.hash + iframe跨域

实现原理： a域与b域跨域相互通信，通过中间页c来实现。三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

1）a.html：(http://www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 向b.html传hash值
    setTimeout(function() {
    
    
        iframe.src = iframe.src + '#user=admin';
    }, 1000);
    
    // 开放给同域c.html的回调方法
    function onCallback(res) {
    
    
        alert('data from c.html ---> ' + res);
    }
</script>

2）b.html：(http://www.domain2.com/b.html)

<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 监听a.html传来的hash值，再传给c.html
    window.onhashchange = function () {
    
    
        iframe.src = iframe.src + location.hash;
    };
</script>

3）c.html：(http://www.domain1.com/c.html)

<script>
    // 监听b.html传来的hash值
    window.onhashchange = function () {
    
    
        // 再通过操作同域a.html的js回调，将结果传回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
</script>

7、window.name + iframe跨域

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

1）a.html：(http://www.domain1.com/a.html)

var proxy = function(url, callback) {
    
    
    var state = 0;
    var iframe = document.createElement('iframe');

    // 加载跨域页面
    iframe.src = url;

    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    iframe.onload = function() {
    
    
        if (state === 1) {
    
    
            // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
    
    
            // 第1次onload(跨域页)成功后，切换到同域代理页面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };

    document.body.appendChild(iframe);

    // 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
    function destoryFrame() {
    
    
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};

// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){
    
    
    alert(data);
});

2）proxy.html：(http://www.domain1.com/proxy.html)
中间代理页，与a.html同域，内容为空即可。
3）b.html：(http://www.domain2.com/b.html)

<script>
    window.name = 'This is domain2 data!';
</script>

通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

8、postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

1、页面和其打开的新窗口的数据传递
2、多窗口之间消息传递
3、页面与嵌套的iframe消息传递
4、上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数：

data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin：协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

1）a.html：(http://www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
    
    
        var data = {
    
    
            name: 'aym'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };

    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
    
    
        alert('data from domain2 ---> ' + e.data);
    }, false);
</script>

2）b.html：(http://www.domain2.com/b.html)

<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
    
    
        alert('data from domain1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
    
    
            data.number = 16;

            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>

9、WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。
原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。
1）前端代码：

<div>user input：<input type="text"></div>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');

// 连接成功处理
socket.on('connect', function() {
    
    
    // 监听服务端消息
    socket.on('message', function(msg) {
    
    
        console.log('data from server: ---> ' + msg); 
    });

    // 监听服务端关闭
    socket.on('disconnect', function() {
    
     
        console.log('Server socket has closed.'); 
    });
});

document.getElementsByTagName('input')[0].onblur = function() {
    
    
    socket.send(this.value);
};
</script>

2）Nodejs socket后台：

var http = require('http');
var socket = require('socket.io');

// 启http服务
var server = http.createServer(function(req, res) {
    
    
    res.writeHead(200, {
    
    
        'Content-type': 'text/html'
    });
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

// 监听socket连接
socket.listen(server).on('connection', function(client) {
    
    
    // 接收信息
    client.on('message', function(msg) {
    
    
        client.send('hello：' + msg);
        console.log('data from client: ---> ' + msg);
    });

    // 断开处理
    client.on('disconnect', function() {
    
    
        console.log('Client socket has closed.'); 
    });
});

10、小结

以上就是9种常见的跨域解决方案，jsonp（只支持get请求，支持老的IE浏览器）适合加载不同域名的js、css，img等静态资源；CORS（支持所有类型的HTTP请求，但浏览器IE10以下不支持）适合做ajax各种跨域请求；Nginx代理跨域和nodejs中间件跨域原理都相似，都是搭建一个服务器，直接在服务器端请求HTTP接口，这适合前后端分离的前端项目调后端接口。document.domain+iframe适合主域名相同，子域名不同的跨域请求。postMessage、websocket都是HTML5新特性，兼容性不是很好，只适用于主流浏览器和IE10+。

参考自
https://www.imooc.com/article/291931
https://mp.weixin.qq.com/s/OG8Vb1Rc1Md4ON7usSu90A

前端跨域解决方案总结

前端跨域解决方案总结

一、什么是跨域？

二、为什么会产生跨域

三、常见的跨域场景

四、9种跨域解决方案

1、JSONP跨域

1、概述

2、实现流程

3、jsonp简单实现

1)、原生JS实现

2）jquery Ajax实现：

3）Vue axios实现：

4)、后端node.js代码：

2、跨域资源共享（CORS）

1、概述

2、跨域是浏览器还是服务器的限制？

3、预检请求

1）、预检请求定义

2）、预检请求示例

4、CORS 与认证

5、这种方法如果后端是采用node开发的，可以使用 CORS 模块

6、补充，原生ajax和jquery的ajax

3、nginx代理跨域

1、nginx配置解决iconfont跨域

2、nginx反向代理接口跨域

4、nodejs中间件代理跨域

1）非vue框架的跨域

2）vue框架的跨域

5、document.domain + iframe跨域

6、location.hash + iframe跨域

7、window.name + iframe跨域

8、postMessage跨域

9、WebSocket协议跨域

10、小结

猜你喜欢