CORS 预检错误 redux & loopback API

Posted 2023-02-27

【中文标题】CORS 预检错误 redux & loopback API

【英文标题】：CORS preflight error redux & loopback API

【发布时间】：2016-08-21 02:00:09

【问题描述】：

我在 react-redux 上有一个客户端应用程序，在 loopback 上有一个 API 应用程序。

对于我的本地测试，我在端口 8080 上运行客户端应用程序，在端口 3000 上运行服务器应用程序。

当我尝试使用客户端应用程序测试 Google OAuth（使用 loopback-passport component）时，我收到以下错误。

当我使用 POSTMAN 对其进行测试时，没有任何问题。

这是客户端代码，

require('babel-polyfill'); 
import  CALL_API  from 'redux-api-middleware'; 
import C from '../constants';
const API_ROOT = 'http://localhost:3000';
function googleLogin()    return async(dispatch) => 
    const actionResp = await dispatch(
      [CALL_API]: 
        endpoint: API_ROOT + '/auth/google',
        headers: 
          'Access-Control-Allow-Credentials': 'false',
          'Access-Control-Allow-Methods': 'GET',
          'Access-Control-Allow-Origin': API_ROOT
        ,
        method: 'GET',
        types: ['GET', 'GET_SUCCESS', 'GET_FAILED']
      
    );

    if (actionResp.error) 
      console.log(actionResp);
      throw new Error('Some error in communication', actionResp);
     else 
      console.log(actionResp);
       
 ; 

环回中间件的CORS设置如下，

"cors": 
   "params": 
      "origin": true,
      "credentials": false,
      "maxAge": 86400
    
  

这听起来像一个简单的问题，在这里感谢任何帮助。

【问题讨论】：

你能不能 fork github.com/strongloop/loopback-sandbox 并创建一个示例项目。我已将我们的环回项目配置为使用 CORS。我会尽力帮忙的。

【参考方案1】：

目前大多数浏览器不支持预检请求的以下重定向。

在你的情况下试试这个：

发出一个简单的请求来确定（使用 Fetch API 的 Response.url 或 XHR.responseURL 来确定真正的预检请求最终会到达哪个 URL）。 使用您在第一步中从 Response.url 或 XMLHttpRequest.responseURL 获得的 URL 发出另一个请求（“真正的”请求）。

Cross-Origin Resource Sharing (CORS) - Preflighted requests and redirects