即使在实施后端快速代理设置后也出现 CORS 策略错误答案

【问题标题】：getting CORS policy error even after implementing backend express proxy setup即使在实施后端快速代理设置后也出现 CORS 策略错误
【发布时间】：2021-11-07 21:48:32
【问题描述】：

我正在使用外部 api，我将 express.js 设置为我的后端并使用 app.use(cors()) 来解决 cors 策略错误，但当我执行时我仍然收到错误尝试在 react 中进行 api 调用

服务器设置

server.js

const express = require('express')
const app = express();
const cors = require('cors')

app.use(cors({
    origin: '*'
}));

const port = 5000;

app.listen(port, () => console.log(`Server started on port ${port}`));

API 调用

app.js

  useEffect(() => {
    async function datareciever() {
      const response = await fetch("api_url")
      const data = await response.json()
      console.log(data)
    }
    datareciever()
  }, [])

我在浏览器中收到的错误

CORS 策略已阻止从源“http://localhost:3000”获取“api_url”的访问权限：对预检请求的响应未通过访问控制检查：否“访问-请求的资源上存在 Control-Allow-Origin' 标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我也试过将端口设置为 3000，但是 express 服务器占用了 3000 端口所以反应然后切换到 3001。

我相信 origin: '*' 应该允许任何端口/域，所以我认为这不是问题。

当前文件结构（如果重要）。 React 在 expressapp 文件夹中。

可能导致问题的原因是什么？

【问题讨论】：

分享完整的错误
您的问题似乎类似于 - stackoverflow.com/questions/34644622/… 试试这个 - stackoverflow.com/a/56051528/5417843
@Evert 更新帖子以包含完整错误
您的app.js 中的api_url 是替换为外部API 的实际URL 还是替换为您的API URL？
@MichaelPu api_url 是外部 api 的 url，带有 API 密钥的标头，只是将其删除并将 api_url 发布在这里因为实际的网址有点长，只是让帖子看起来整洁。

标签： reactjs express cors

【解决方案1】：

问题是您使用的外部 API URL 不支持 CORS。因此，您无法直接从您的 React 代码向该外部 API 发送请求。但是，您可以使用 Express.js 后端将您的请求转发到外部 API。您可以在此处阅读有关 CORS 的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

要使用 Express.js 后端作为代理将您的请求转发到外部 API，您可以使用 http-proxy 包。

对于server.js

const express = require('express')
const app = express();
const cors = require('cors');

const proxy = require('http-proxy').createProxyServer({
    host: 'external_api_url',
});

app.use(cors({
    origin: '*'
}));

const port = 5000;

app.get('/external_api', function(req, res, next) {
    proxy.web(req, res, {
        target: 'external_api_url'
    }, next);
});

app.listen(port, () => console.log(`Server started on port ${port}`));

对于app.js

  useEffect(() => {
    async function datareciever() {
      const response = await fetch("localhost:5000/external_api")
      const data = await response.json()
      console.log(data)
    }
    datareciever()
  }, [])

【讨论】：