javascript - CORS 预检错误 redux & loopback API

标签 javascript reactjs cors redux loopbackjs

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

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

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

enter image description here

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

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

最佳答案

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

关于javascript - CORS 预检错误 redux & loopback API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36878510/

相关文章:

javascript - 先加载特定图像,然后再加载页面的其余部分

javascript - bxslider,用于图像轮播,似乎不适合我?

javascript - 如何使用 Headless UI 折叠 sibling

angularjs - 来自 AngularJS 的 Django CORS API

ASP.NET CORS 阻止字体请求

jquery - CORS 预检未返回

javascript - 在 Typescript 中将接口(interface)转换为函数参数

javascript - 模型 A 与模型 B Sequelize 错误无关

javascript - BrowserRouter 导致无效的钩子(Hook)调用。 Hooks 只能在函数组件的主体内部调用

reactjs - React Redux 如何分派(dispatch)异步操作和更新状态