我正在开展一个项目
因此我需要从React.js应用程序调用几个API,我面临的问题是:
根本不工作 - fetch() API
fetch('localhost:1337/rest/api', {
body: JSON.stringify( {name: "Sidd", "info": "Lorem ipsum dolor .."} ),
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
mode: 'no-cors',
method: 'post'
})
当我使用fetch() API时,我没有在Express.js中定义的API中获取请求正文
console.log(req.body) // On logging the request body
{} // am getting this [empty]
WORKS- jQuery AJAX
$.ajax('localhost:1337/rest/api', {
type: 'post',
data: {name: "Sidd", "info": "Lorem ipsum dolor .."},
dataType: 'application/json',
success: function (data, status, xhr) {
console.log('status: ' + status + ', data: ' + data);
},
error: function (jqXhr, textStatus, errorMessage) {
console.log('Error' + errorMessage);
}
});
但是我得到了No 'Access-Control-Allow-Origin' header is present on the requested resource.
错误!
但在这种情况下,至少我获取我的API中的请求正文。还通过POSTMAN测试了我的API,它们完全正常。 我在网上看到了所有讨论,但没有任何效果。
哦!我还想补充一点 - 在我的Express.js设置中正确使用正文解析器
app.use(bodyParser.json({limit: '2mb'})); // 2mb file upload limit
app.use(bodyParser.urlencoded({limit: '2mb', extended: true})); // 2mb file upload limit
No 'Access-Control-Allow-Origin'
错误。谢谢你们!
答案 0 :(得分:2)
由于1337
和3000
是不同的端口,因此您遇到了CORS请求。
首先,在获取请求中设置mode: cors
,然后添加路由器处理程序
router.use((req, res, next) => {
res.header('access-control-allow-origin', 'http://localhost:3000')
res.header('Access-Control-Allow-Credentials', true)
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With')
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
res.header('Access-Control-Max-Age', 1728000)
if (req.method === 'OPTIONS') {
return res.json({ status: 0, message: '', payload: null })
}
next()
})
在rest/api
处理程序之前。
这样做之后,你很高兴。