为避免“访问控制允许来源”问题，应如何在调用位于其他地方的 API 的 MERN 应用程序上设置 CORS？

如何解决为避免“访问控制允许来源”问题，应如何在调用位于其他地方的 API 的 MERN 应用程序上设置 CORS？

我正在使用一个调用 themealdb api 的 MERN 应用程序，该应用程序工作正常，直到应用了 JWT 和 cookie 的身份验证和授权。如果我登录，那么每当拨打电话时，我都会收到以下信息

访问 XMLHttpRequest 在 'https://www.themealdb.com/api/json/v1/1/search.PHP?f=a' 来自原点 'http://localhost:3000' 已被 CORS 策略阻止：值响应中的“Access-Control-Allow-Origin”标头不得为当请求的凭据模式为“包含”时，通配符“*”。这 XMLHttpRequest 发起的请求的凭证模式是由 withCredentials 属性控制。

在我看来，React 端的以下代码行是罪魁祸首

axios.defaults.withCredentials = true;

如果我注释掉这一行，问题就会消失，调用也不会出现问题。

通过这些答案环顾四周，似乎可以在后端制定解决方案，这对我来说是 Express，但到目前为止没有任何效果。 Express 代码有这个用于 cors：

app.use(cors({origin: ['http://localhost:3000'],credentials: true}));

我使用 let 和 var 替换了 corsOptions 以防止出现相同的错误：

let corsOptions = {
    origin: 'http://localhost:3000',credentials : true
   }
  
  app.use(cors(corsOptions));
  
  app.use(function (req,res,next) {   
      res.setHeader('Access-Control-Allow-Origin','http://localhost:3000');    
      res.setHeader('Access-Control-Allow-Methods','GET,POST,OPTIONS,PUT,PATCH,DELETE');    
      res.setHeader('Access-Control-Allow-Headers','X-Requested-With,content-type');   
      res.setHeader('Access-Control-Allow-Credentials',true);    
      next();
  });

有什么建议吗？对于这种情况，需要在服务器端添加什么才能使其工作？

谢谢

解决方法

我通常使用此代码段为预配置的来源列表启用 CORS：

initial_val

另外，as per MDN，您可以尝试在客户端上将 withCredentials 选项设置为 mutate(predicted_cumprice = acumPredict(...))。

或者，如果您要连接到您不维护的服务，您可以创建一个 Node 代理，该代理将调用 3rd 方服务，而不是您的客户端直接调用它。

const allowOrigins = ['http://localhost:3000',/** other domains if any */ ]
const corsOptions = {
  credentials: true,origin: function(origin,callback) {
    if (allowOrigins.indexOf(origin) !== -1) {
      callback(null,true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

server.use(cors(corsOptions));