前端跨域的几种方式

原创

幻影龙王

修改于 2021-09-13 02:52:21

58200

代码可运行

文章被收录于专栏：幻影龙王幻影龙王

运行总次数：0

代码可运行

在我们做i前端开发的时候往往会遇到数据交互时候的跨域，有ajax请求的跨域，有页面data交互的跨域，这些都会影响数据的传输，还有父子页面间传递的跨域。下面简单讲一下前端的几种常见跨域以及解决办法

跨域方式：

1、jsonp

古老的跨域方式当我们跨域请求接口时会触发Ajax的同源策略，使用jsonp可以利用script的src跨域属性避免这个问题，但是只能实现简单的get请求

<script src="/api/tableList?cb=initData">

2、express

接口跨域，因为node属于后台语言，通过node启的服务可以跨域，然后去判断允许的请求头和来源

app.get('/api/corss', (req, res) => {
  // 允许哪些客户端访问我
  // * 代表允许所有
  res.header('Access-Control-Allow-Origin', '*');
  // 允许客户端的请求方法
  res.header('Access-Control-Allow-Methods', 'get,post');

  res.send('OK');
});

3、postMessage

用于页面和iframe的交互和通信，通常iframe的交互时一个发送方法，一个接收方法，

postMessage.onmessage

4、window.name

同域环境下，当前的页面(test.com:8081)想获取b(test.com:8082)页面的数据当前的页面在iframe的b页面加载成功之后立即修改iframe的src到一个空白页面，当空白页面再触发onload的时候就可以获取到原来b页面加载过的name了‘’

<!-- 当前页面 -->
<iframe src="http://test.com:8082/testb.html" frameborder="1"></iframe>

<script>
    var ifr = document.querySelector('iframe')
    ifr.style.display = 'none'
    var flag = 0;
    ifr.onload = function () {
        if (flag == 1) {
            console.log('跨域获取数据', ifr.contentWindow.name);
            ifr.contentWindow.close();
        } else if (flag == 0) {
            flag = 1;
            ifr.contentWindow.location = 'http://test.com:8081/proxy.html';
        }
    }
</script>

<!-- b页面 -->
<script>
    var person = { name: 'xiangjv', age: 22, school: 'xjtu' }
    window.name = JSON.stringify(person)
</script>

5、document.domain

同ip不同域的连个页面的数据交互，如果直接拿子页面的数据会引起跨域，在上面设置同一个域名，表明document.domain = “一级域名”，就可以实现跨域

6、nginx

通过nginx对请求的拦截进行代理到需要跨域的请求

    # 直接请求nginx也是会报跨域错误的这里设置允许跨域
    # 如果代理地址已经允许跨域则不需要这些, 否则报错(虽然这样nginx跨域就没意义了)
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;