CORS预检错误redux和loopback API

ano*_*oop 6 javascript cors reactjs loopbackjs redux

我在react-redux&API app上有一个客户端应用程序loopback.

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

当我尝试使用loopback-passport component客户端应用测试Google OAuth(使用)时,我收到以下错误.

在此输入图像描述

当我使用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);
    }   
 }; 
}
Run Code Online (Sandbox Code Playgroud)

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

"cors": {
   "params": {
      "origin": true,
      "credentials": false,
      "maxAge": 86400
    }
  }
Run Code Online (Sandbox Code Playgroud)

这听起来像一个简单的问题,感谢这里的任何帮助.

小智 0

\n

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

\n
\n\n

在你的情况下试试这个:

\n\n
\n
    \n
  1. 发出一个简单的请求来确定(使用 Fetch API 的 Response.url 或 XHR.responseURL 来确定真正的预检请求最终会到达哪个 URL)。
  2. \n
  3. 使用您在第一步中从 Response.url 或 XMLHttpRequest.responseURL 获取的 URL 发出另一个请求(\xe2\x80\x9creal\xe2\x80\x9d 请求)。
  4. \n
\n
\n\n

跨源资源共享 (CORS) - 预检请求和重定向

\n