跨域的方法有哪些（中）？

写前端的小北
82 阅读2分钟

这是我参与「4月日新计划更文活动」的第23天。

昨天带着大家一起大概得回顾了一下跨域的7种方法有哪些。

今天继续昨天的那个话题，跟大家讲一下cors跨域资源共享是什么，以及postMessage请求数据应该怎么做。

话不多说，直接上主题吧。

cors跨域资源共享的实现

在实现跨域资源共享（CORS）时，需要在 Web 服务器上进行配置。

我们通常会用以下方式来实现CORS请求跨域：

在服务器响应的HTTP头中添加特殊的Access-Control-* 字段，以授权请求的主体允许跨域访问。

在公司一般使用nginx服务器比较多，所以在nginx服务器上配置如下：

if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;
    add_header 'Access-Control-Max-Age' 86400 always;
    return 200;
}

add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;
add_header 'Access-Control-Max-Age' 86400 always;

因为时间关系，具体的功能细节，请掘友们自行上百度查询。

我在这里就不具体展开来讲了。

使用postMessage请求数据

前端通过postMessage方法可以向不同的窗口、文档或iframe发送消息，正是利用这个特性而用来实现跨域数据交互。

我下面写一个例子来展示postMessage在一发一收之间如何进行交互的。

页面A是数据发送端，编写的代码如下，此时它正在向页面B发送数据：

const targetWindow = document.getElementById('target-iframe').contentWindow;

targetWindow.postMessage({data: 'hello'}, 'http://localhost:8080');

上面这段代码是在一个iframe页面中想页面http://localhost:8080 发送的数据，这里iframe页面的id是target-iframe。

页面B(就是http://localhost:8080 对应的那个页面)对A页面发过来的数据进行监听，并且收集数据。代码如下：

window.addEventListener('message', event => {
    if (event.origin === 'http://localhost:8081') {
        const data = event.data;
        console.log(data); // {data: 'hello'}
    }
});

这里的event.origin是数据来源端，同样要判断请求的来源是否合理和安全。

不然把安全的闸门打开之后，造成了更大的安全隐患，反而会出现新的问题。

以上就是今天对于cors跨域资源共享和使用postMessage传输数据的总结。

看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。

avatar
文章
阅读
粉丝