「深入浅出」前端开发中常用的几种跨域解决方案

http://kbs.sports.qq.com/index.html 
 
协议：http(还有以一种https协议) 
域名：kbs.sports.qq.com 
端口号：80 
 
https://127.0.0.1:3000 
 
协议：https 
域名：127.0.0.1 
端口号：3000 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

修改本地HOST(不作介绍) 
JSONP 
CORS 
Proxy 
Nginx反向代理 
Post Message（利用iframe标签，实现不同域的关联） 
1.
2.
3.
4.
5.
6.

注意： 基于ajax或fetch发送请求时，如果是跨域的，则浏览器默认的安全策略会禁止该跨域请求 
1.

补充说明：以下所有的测试用例，均由Web：http://127.0.0.1:5500/index.html向API：http://127.0.0.1:1001/list发起请求 
1.

即 在“http://127.0.0.1:1001/list”from origin“http://127.0.0.1:55”上对XMLHttpRequest的访问已被CORS策略阻止:被请求的资源上没有“Access- control - allow-origin”头 
1.

let xhr = new XMLHttpRequest; 
xhr.open('get', 'http://127.0.0.1:1001/list'); 
xhr.onreadystatechange = () => { 
  if (xhr.status === 200 && xhr.readyState === 4) { 
    console.log(xhr.responseText); 
  } 
}; 
xhr.send();  
1.
2.
3.
4.
5.
6.
7.
8.

弊端： 
 
只允许GET请求 
不安全：只要浏览器支持，且存在浏览器的全局变量里，则谁都可以调用 
1.
2.
3.
4.

// 客户端 
function jsonp(url, callback) { 
  // 把传递的回调函数挂载到全局上 
 let uniqueName = `jsonp${new Date().getTime()}`; 
  // 套了一层 anonymous function 
  // 目的让 返回的callback执行且删除创建的标签 
  window[uniqueName] = data => { 
  // 从服务器获取结果并让浏览器执行callback 
    document.body.removeChild(script); 
    delete window[uniqueName]; 
    callback && callback(data); 
  } 
   
  // 处理URL 
  url += `${url.includes('?')} ? '&' : '?}callback=${uniqueName}'`; 
   
  // 发送请求 
  let script = document.createElement('script'); 
  script.src = url; 
  document.body.appendChild(script); 
} 
 
// 执行第二个参数 callback，获取数据 
jsonp('http://127.0.0.1:1001/list?userName="lsh"', (result) => { 
 console.log(result); 
}) 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

// 服务器端 
// Api请求数据 
app.get('/list', (req, res) => { 
   
  // req.query 问号后面传递的参数信息 
  // 此时的callback 为传递过来的函数名字 (uniqueName) 
 let { callback } = req.query; 
   
  // 准备返回的数据（字符串） 
  let res = { code: 0, data: [10,20] }; 
  let str = `${callback}($(JSON.stringify(res)))`; 
   
  // 返回给客户端数据 
  res.send(str); 
}) 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

// 服务器请求的 url 
Request URL: 
 http://127.0.0.1:1001/list?userName="lsh"&callback=jsonp159876002 
 
// 服务器返回的函数callback 
 jsonp159876002({"code":0, "data": [10,20]}); 
 
// 客户端接收的数据信息 
{ code: 0, data: Array(2) } 
1.
2.
3.
4.
5.
6.
7.
8.
9.

jsonp('https://matchweb.sports.qq.com/matchUnion/cateColumns?from=pc', result => { 
  console.log(result); 
}); 
1.
2.
3.

// 服务器端 
app.use((req, res, next) => { 
 // * 允许所有源（不安全/不能携带资源凭证） 
 res.header("Access-Control-Allow-Origin", "*"); 
 res.header("Access-Control-Allow-Credentials", true); 
 
 /* res.header("Access-Control-Allow-Headers", "Content-Type,...."); 
 res.header("Access-Control-Allow-Methods", "GET,..."); */ 
 
 // 试探请求：在CORS跨域请求中，首先浏览器会自己发送一个试探请求，验证是否可以和服务器跨域通信，服务器返回200，则浏览器继续发送真实的请求 
 req.method === 'OPTIONS' ? res.send('CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!') : next(); 
}); 
 
// 客户端 
let xhr = new XMLHttpRequest; 
xhr.open('get', 'http://127.0.0.1:1001/list'); 
xhr.setRequestHeader('Cookie', 'name=jason'); 
xhr.withCredentials = true; 
xhr.onreadystatechange = () => { 
  if (xhr.status === 200 && xhr.readyState === 4) { 
    console.log(xhr.responseText); 
  } 
}; 
xhr.send(); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

app.use((req, res, next) => { 
   
  // 也可自定义白名单，检验请求的源是否在白名单里，动态设置 
  /* let safeList = [ 
  "http://127.0.0.1:5500", 
  xxx, 
  xxxxx, 
 ]; */ 
 res.header("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); 
 res.header("Access-Control-Allow-Credentials", true); // 设置是否可携带资源凭证 
 
 /* res.header("Access-Control-Allow-Headers", "Content-Type,...."); 
 res.header("Access-Control-Allow-Methods", "GET,..."); */ 
 
 // 试探请求：在CORS跨域请求中，首先浏览器会自己发送一个试探请求，验证是否可以和服务器跨域通信，服务器返回200，则浏览器继续发送真实的请求 
 req.method === 'OPTIONS' ? res.send('CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!') : next(); 
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
 
module.exports = { 
  mode: 'production', 
  entry: './src/main.js', 
  output: {...}, 
  devServer: { 
    port: '3000', 
    compress: true, 
    open: true, 
    hot: true, 
    proxy: { 
      '/': { 
        target: 'http://127.0.0.1:3001', 
        changeOrigin: true 
      } 
    } 
  }, 
  // 配置WEBPACK的插件 
  plugins: [ 
    new HtmlWebpackPlugin({ 
      template: `./public/index.html`, 
      filename: `index.html` 
    }) 
  ] 
}; 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

server { 
 listen: 80; 
  server_name: 192.168.161.189; 
  loaction: { 
  proxy_pass_http://127.0.0.1:1001; // 请求转向这个URL地址，服务器地址 
    root html; 
    index index.html; 
  } 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.

// 把 B页面当做A的子页面嵌入到A页面里 
<iframe id="iframe" src="http://127.0.0.1:1002/B.html" frameborder="0" style="display: none;"></iframe> 
 
<script> 
  iframe.onload = function () { 
    iframe.contentWindow.postMessage('珠峰培训', 'http://127.0.0.1:1002/'); 
  } 
 
  //=>监听B传递的信息 
  window.onmessage = function (ev) { 
    console.log(ev.data); 
  } 
</script> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

<script> 
  //=>监听A发送过来的信息 
  window.onmessage = function (ev) { 
    // console.log(ev.data); 
 
    //=>ev.source:A 
    ev.source.postMessage(ev.data + '@@@', '*'); 
  } 
</script> 
1.
2.
3.
4.
5.
6.
7.
8.
9.