Cors问题我还由于cors在pkg.json中设置了代理并根据它设置了api，但是这个错误没有被删除

Posted 2023-02-16

【中文标题】Cors问题我还由于cors在pkg.json中设置了代理并根据它设置了api，但是这个错误没有被删除

【英文标题】：Cors issue i also set the proxy in pkg.json due to cors and set the api according to it but this error is not remove

【发布时间】：2020-09-25 02:27:31

【问题描述】：

GET http://localhost:3000/api/fetch?search=12312321 404 (Not Found) cors issue in Reactjs and node js i use the proxy method in Reactjs but can't get rid from it please help me

proxy

“代理”：“http://localhost:5000/”

tried both

“代理”：“http://localhost:5000”

express

RegisterRoute.route('/fetch/:id').get( ( req , res) =>

console.log("called by someone ",req.params.id);

res.send("okey will");

);

Reactjs function which will call the backend api

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 时，它可以正常工作，但是当我给它提供参数时，它会给出错误 xhr:178 404 not found

a simple server which also returns the same result

const express = require('express');

const cors= require('cors');

const 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("调用",req.params.id);

); app.listen(5000);

【问题讨论】：

您是否仍然在浏览器控制台中收到 CORS 错误，或者只是浏览器中开发工具中网络选项卡中 API 的 404 响应？此外，如果您可以共享从 UI 发出 api 请求的代码以及在后端公开 API 的部分，这将有所帮助。

我认为这与 cors 无关，因为其他 api （例如 post 和 get witout params）非常适合检查 cors 我还在 pkg、json 中设置代理并同时运行服务器和客户端，我发现当我提供参数以获取我正在共享这两个 api 时出现错误，请检查现在我的头很痛

Backend) RegisterRoute.route('/fetch/:id').get((req,res)=> console.log("被某人调用",req.params.id); res.send("okey will"); );

React FetchNotification() axios( 'method':'GET', 'url':'api/fetch', 'headers': 'content-type':'application/octet-流', 'x-rapidapi-host':'example.com', 'x-rapidapi-key': process.env.RAPIDAPI_KEY , 'params': 'id':'12312321' , )

首先，如果您可以将 cmets 中的代码信息移动到问题中，那就太好了（您可以阅读 *** 关于“如何提出问题”的常见问题解答）。另外，如果您也可以添加 package.json 代码，那就太好了。

【参考方案1】：

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

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

到

app.use(cors());

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

另外，你需要对 URL 做一个小的改动，而不是调用

'url':'api/fetch'

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

'url':'api/fetch/some_id'

【讨论】：

啊，我没有意识到这样的错误，谢谢亲爱的，它解决了我的问题，在那之后我真的很头疼，谢谢你节省了我的时间

我很高兴@lynnchris

【参考方案2】：

我觉得有多个问题。我会尝试一一解决。

首先，如果您正确地代理您的请求（我认为您是根据您的 package.json），那么您不需要 cors 包。所以你可以摆脱那个包。

阅读更多关于为什么你不应该让所有传入请求从安全角度绕过 CORS 检查 -> Is it safe to enable CORS to * for a public and readonly webservice?

其次，您在前端指定的 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/"。注意我是如何使用/

或

可以将快递端的网址更新为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 等状态。

【讨论】：

嘿，感谢您的回复，我非常感谢您的工作，我删除了 cors，但我不认为代理 url 调用会产生此错误，因为您可以在没有参数的情况下调用 get，它只会在我发送参数时显示错误所以代理只是用前端端口隐藏后端端口来摆脱cors，所以我们可以同时使用这两种技术，或者我在后端使用cors而不使用代理方法，或者我在前端使用没有cors的代理，我调试的react路由器没有问题路线正确，当我提供参数时它只是显示错误，我已经尝试过你提到的东西仍然无法理解

我也删除了 expres-s-router.route().get 但它仍然没有发送参数

我正在尝试使用 api/fetch?id=value 来调用 api，我只能通过 req.query 访问它，但我正在做 req.params 所以对于 params 这不是我应该使用的 params 方式来自前端 api/fetch/id=value 的 cal 这对我来说真的很重要，你试图帮助我，这意味着非常感谢好友

通常，如果您正在进行 GET 调用，那么您实际上不需要将 JSON obj 作为正文从前端发送到后端。 GET 调用主要用于根据 ID 或用户名等获取一些数据。基本上是一个值。因此约定是使用 `api/fetch?id=value` 并从后端的查询参数中提取它。如果您将复杂的 JSON 作为值发送，那么您也需要对该 URL 进行编码，但您应该首先考虑更正设计。

因此您可以使用 POST 请求来发送复杂的 JSON，但根据约定，理想情况下应该在您想要保存/更新某些内容时使用 POST。是的，你是对的，我们可以使用这两种解决方案来摆脱 CORS 问题，但是请阅读为什么使用 CORS 包与代理方法相比是有害的，因为你只是允许所有请求进行 CORS，这是一个很大的否定安全角度。并且很乐意帮助交配。