Cors问题由于Cors的原因，我还在pkg.json中设置了代理，并根据它设置了api，但该错误未被删除

Question

获取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）；

Answer 1

我觉得有很多问题。我会试着一个一个地解决他们的问题。

首先，如果您正确地代理了请求（我认为您是按照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等状态。

Answer 2

我可以看到您使用Nodejs作为服务器端。因此，您可以尝试更改下面的行

app.use('*',cors());

至

app.use(cors());

如果这不能解决问题，你可以尝试为CORS添加一个google chrome扩展（最有可能）。这样，您就不需要为运行服务器设置任何代理。

另外，您需要在URL中做一个小的更改，而不是调用

'url':'api/fetch'

您需要在调用中提供一个id，因为后端api正在接受一个参数

'url':'api/fetch/some_id'