获取http://localhost:3000/api/fetch?search=12312321 404(Not Found)Reactjs和node js中的cors问题我在Reactjs中使用了代理方法,但无法消除,请帮助我
代理
“代理”:“http://localhost:5000/”
两者都试过
“代理”:“http://localhost:5000”
快速
registerRoute.route('/fetch/:id').get((req,res)=>{
console.log("called by someone ",req.params.id);
res.send(“OKEY WILL”);
});
将调用后端API的REACTJS函数
FetchNotification(){
axios({
'method':'GET',
'url':'api/fetch',
'headers': {
'content-type':'application/octet-stream',
'x-rapidapi-host':'example.com',
'x-rapidapi-key': process.env.RAPIDAPI_KEY
}
,
'params': {
'id':'12312321'
},
})
}
当我简单地调用Axios.Get it Perfect work时,但当我给它提供参数时,它会给出错误xhr:178 404 not found
也返回相同结果的简单服务器
常量express=require(“express”);
const cors=require('cors');
常量app=express();
var bodyParser=require('body-parser');
app.use(BodyParser.URlenCoded({extended:false}));
//解析应用程序/JSON
app.use(bodyParser.json());
app.use('*',cors());
app.get('/fetch/:id',(req,res)=>{
console.log(“calling”,req.params.id);
});app.listen(5000);
我可以看到您使用Nodejs作为服务器端。因此,您可以尝试更改下面的行
app.use('*',cors());
至
app.use(cors());
如果这不能解决问题,你可以尝试为CORS添加一个google chrome扩展(最有可能)。这样,您就不需要为运行服务器设置任何代理。
另外,您需要在URL中做一个小的更改,而不是调用
'url':'api/fetch'
您需要在调用中提供一个id,因为后端api正在接受一个参数
'url':'api/fetch/some_id'
我觉得有很多问题。我会试着一个一个地解决他们的问题。
首先,如果您正确地代理了请求(我认为您是按照package.json进行代理的),那么您就不需要cors包了。这样你就可以处理掉那个包裹了。
阅读更多关于为什么不应该让所有传入请求绕过CORS检查的内容->对于公共只读WebService启用CORS是否安全?
其次,您在前端指定的url是'url':'api/fetch'
,这意味着浏览器将调用http://localhost:3000/api/fetch?search=12312321
,正如您在404的错误语句中看到的那样,它正确地执行了该操作。
在package.json中将代理指定为“proxy”:“http://localhost:5000”
意味着您现在正在向http://localhost:5000
而不是http://localhost:3000
发出请求,但浏览器仍然认为它的http://localhost:3000
。这就是代理的全部目的,也就是你如何愚弄浏览器在不抛出任何错误的情况下执行CORS。
但是,由于在服务器上,您正在监听app.get('/fetch/:id',(req,res)
而不是app.get('api/fetch/:id',(req,res)
,因此它与此URL不匹配,因为您也没有在某个单独的路由器模块中显式处理以/api
开头的请求。
因此,您应该将axios调用中的url更新为url':'/fetch
,而package.json中的代理值分别为“proxy”:“http://localhost:5000”
或url':'fetch
和“proxy”:“http://localhost:5000/”
。注意我是如何使用/
的
或
您可以将express端的URL更新为app.get('api/fetch/:id',(req,res)
最后,每当您收到一个请求时,您需要返回一些值(字符串或JSON甚至状态代码)作为结果。在您的示例中,您只是console.log(“calling”,req.params.id);
,没有向UI发回任何响应。
因此,即使您的404可以在修复URL后解决问题,您也会遇到请求超时错误(408),因为您的UI将一直等待来自服务器的响应,而您没有发送任何响应。
所以你应该做这样的事情:
app.get('api/fetch/:id',(req , res) => {
console.log("calling",req.params.id);
res.send("It worked");
});
注意返回响应的方式->https://expressjs.com/en/starter/hello-world.html如果您不想返回响应,那么您可以简单地返回200、504等状态。