前言
在我们做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;
标签: js部分服务器nginx