javascript - CORS 预检错误 redux & loopback API

Question

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

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

当我尝试使用客户端应用测试 Google OAuth(使用 loopback-passport 组件)时，出现以下错误。

当我使用 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
    }
  }

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

Answer 1

Most browsers currently don’t support following redirects for preflighted requests.

在你的情况下试试这个:

1. Make a simple request to determine (using Response.url for the Fetch API, or XHR.responseURL to determine what URL the real preflighted request would end up at).
2. Make another request (the “real” request) using the URL you obtained from Response.url or XMLHttpRequest.responseURL in the first step.

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