这是我参与「4月日新计划更文活动」的第24天。
昨天大家一起回顾了一下跨域的7种方法中的两种，分别是：cors跨域资源共享是什么，以及postMessage请求数据应该怎么做。
今天继续昨天的那个话题，跟大家讲一下document.domain + iframe方法，以及nginx代理配置和websocket进行跨域的使用吧。
话不多说，直接上主题吧。
document.domain + iframe方法
document.domain + iframe方法如何实现跨域呢？
在浏览器中有这样一个规定。
在同一域名下的页面中，可以直接访问彼此的 iframe，无需进行任何跨域设置。但是，如果要在不同域名下的页面中访问 iframe，需要进行跨域设置。
其实就可以利用document.domain来解决这个问题。
具体使用步骤如下：
1、父页面和子页面均设置 document.domain 属性为相同的值，例如都设置为“familyli.com”。
2、在父组件中创建一个iframe，然后通过设置 iframe 的 src 属性加载子页面。
3、在子组件中也要设置document.domain 属性为“familyli.com”。
4、然后如果想要在父组件中访问到子组件，可以使用iframe.contentWindow 或者 iframe.contentDocument，来访问子页面的 DOM。
但是在使用iframe的时候需要特别注意：两个页面设置的document.domain必须是主域名或者子域名的一级域名。
而父页面和子页面的协议、端口、主域名必须相同，否则无法进行跨域访问。
如何使用nginx跨域
在使用nginx可以通过配置proxy_pass和add_header来解决跨域问题。
可以通过下面的配置进行实现。
location /api/ {
add_header 'Access-Control-Allow-Origin' '*';
proxy_pass http://localhost:3200/api/;
}
其中，/api/是需要跨域的接口路径。
第二行配置了Access-Control-Allow-Origin头部，'*'表示允许任何来源访问，即允许跨域。
除了配置'*'之外，也可以设置为具体的来源地址；
第三行配置proxy_pass将请求转发至本地3200端口的/api/路径。
完成了上面的配置之后，启动nginx或者重启nginx（如果之前没有启动nginx，那就直接启动nginx即可；如果之前启动过了，那就重启nginx）。
websocket进行跨域
websocek 的协议为 ws:// 或 wss:// 是实时通信，不存在跨域问题。所以其本身的特性就不存在跨域。
以上就是我今天对于document.domain + iframe方法，以及nginx代理配置和websocket进行跨域的总结啦。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
