实现其实直接在 fetch 的配置项里面添加 mode :‘cors’ 就可以了,例子如下:
fetch('http://localhost:3000/myWebSite/praise', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: '5e42b22161478f3750fb48e9'}),
mode:'cors'
})
.then(res => res.json())
.then(res => console.log(res));
以上就能实现跨域。
然而实际应用中可能会出现一些问题,所以我们首先应该学习下这个设置有什么用,请看下图:
可以看到 mode 可以设置以上属性:
看了上面的知识,对此模式的运作有了初步的了解,那接下来说明一下我遇到的问题:
那么你可能报了如下错误:
报错: Access-Control-Allow-Origin 这个属性没有在已请求的资源上(响应头)。如果一个不透明的响应服务满足您的需求,把 mode 设置为 ‘no-cors’ 来获取 ‘cors’ 获取失败的资源。
看上面这句话,解决方式有两个,设置响应头 ’ Access-Control-Allow-Origin’,或者设置 mode:‘cors’。
fetch('http://localhost:3000/myWebSite/praise', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: '5e42b22161478f3750fb48e9'}),
mode:'cors'
})
.then(res => res.json())
.then(res => console.log(res));
出现这种原因,首先确认一下后台有没有使用 bodyparser 这类模块,导致body无法获取。
如果使用了 bodyparser 仍然没有数据,这时候您要注意 body 的传输方式是不是以数据流的形式传输。
出现这种情况的原因很可能是您以为 cors 已经开启了跨域,实际上并没有跨域成功,然后您根据提示,设置为 no-cors 发现后台可以响应,但是body接收不到数据。因为,现在 body 是以数据流的形式传输。
经过本人实验,可以使用 cors ,后端也开启跨域(设置响应头),这时可以正常接收到 body。
使用 no-cors,后端开启跨域,这时是数据流形式的传输 body,需要用以下代码来获取 body。
app.post('/myWebSite/praise', (req, res) => {
let body = '';
req.on('data', data => {
console.log(data);
body += data;
});
req.on('end', () => console.log('body:',JSON.parse(body)))
})
以 x-www-form-urlencoded 转码的方法让 body 被编码为key/value格式发送到服务端,这种方式不会以数据流的形式传输。前端代码:
fetch('http://localhost:3000/myWebSite/praise', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: "id=5e42b22161478f3750fb48e9"
// 如果是多个参数的话,以 xx=xx?xx=xx的形式写,很常用的
mode:'cors'
})
.then(res => res.json())
.then(res => console.log(res));
总结,如果后台接收不到 body(或是说 params ,query都没有),那么先查看是否是使用 bodyparser 这类工具,如果使用,则确认 body 是否通过数据流的形式传输。