React Redux将操作分派到另一个域以进行身份验证

我正在使用omniauth github策略，单击一个按钮，我想向另一个域（例如“”）发送一个操作。但是，当使用dispatch时，此功能不起作用，因为浏览器会预引导我的请求，并使用“No”访问控制“Allow Origin”进行响应。我可以通过使用和指向url来实现这一点，然后url会将用户发送回我的后端，以验证用户是否获得了存储它的令牌。但是如果没有分派，我必须将我的站点在查询参数中生成的JWT令牌发回，因为我省略了我的动作创建者和还原器，所以我无法将其存储在localStorage中。有没有跨域执行分派的方法

export const loginGitHub = () => {
  return dispatch => {
    fetch('https://github.com/login/oauth/authorize?client_id=...&scope=user',{
      method: 'GET',
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      mode: 'cors'
    })
    .then(resp=>resp.json())
    .then(data => {
      debugger
    })
  }
}

---

您需要为此方法提供redux商店的

dispatch

方法，以使其正常工作，这通常通过使用

mapDispatchToProps

和redux的

connect（）

方法完成：

这是典型的流程，如果出于某种原因，您需要在组件外部调用此功能，比如在安装React应用程序之前（但在初始化redux应用商店之后），类似这样的功能可以工作：

import { createStore } from 'redux'

const store = createStore();

export const loginGitHub = dispatch => {
  return dispatch => {
    fetch('https://github.com/login/oauth/authorize?client_id=...&scope=user',{
      method: 'GET',
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      mode: 'cors'
    })
    .then(resp=>resp.json())
    .then(data => {
      debugger
    })
  }
}

loginGitHub(store.dispatch);

这在很大程度上是一种反模式，我建议正确使用

mapDispatchToProps

，这需要

创建商店 在提供商中包装应用程序，并将先前创建的应用商店作为道具提供给提供商。 在组件中使用类似的

connect（）

：

import React, { Component } from 'react';
import { connect } from 'redux';

import { loginGitHub } from './wherever';

class ExampleComponent extends Component {
  // whatever component methods you need
}

const mapDispatchToProps = dispatch => ({
  loginGitHub: () => dispatch(logInGitHub())
})

export default connect(null, mapDispatchToProps)(ExampleComponent);

---

然后，您可以使用组件中的

this.props.loginGitHub（）

调用loginGitHub。

谢谢您的回复，非常详细。我将所有这些都连接到我的容器中，方法通过这个.props.loginGItHub（）进行调度，请求实际上被发送出去，在我的捕获中，我看到它作为错误返回。My dev tools network（我的开发工具网络）选项卡显示正在发出的请求，但返回时出现上述错误“No Access Control Allow Origin”@O.MeeKoh ahh。我专门查找了这个GitHub流。他们希望您将用户发送给他们，用户批准请求，然后用户被重定向回您？例如，您可以将部分完成的注册表单保存在localStorage中，并在用户返回时检索它，从uri Parma中获取身份验证令牌并使用所需数据初始化您的存储，检测它是否都在那里，然后提交所需信息以完成注册或登录？是的！因此，我遇到的问题是最初将它们发送到github。Dispatch将不允许我将它们重定向到github以进行初始登录和授权。奇怪的是，当我的github按钮组件被点击时，执行客户端javascript也是如此。