与 API 的连接 - redux答案

【问题标题】：Connection with API - redux与 API 的连接 - redux
【发布时间】：2016-11-21 06:42:07
【问题描述】：

我正在使用 react 和 redux 构建一个项目，但我无法连接到我的 API。我有这个，

componentDidMount() {
    const {dispatch} = this.props;
    dispatch(fetchByQuerystring());
}

而fetchByQuerystring 是：

export function fetchByQuerystring() {
    return function(dispatch) {

        return fetch(`http://my_domain.dev/api`)
            .then(response => response.json())
            .then(json => dispatch(receiveByQuerystring(json)));
    }
}

当我运行它时，我得到这个错误：

Fetch API 无法加载 http://my-domain.dev/api。不 'Access-Control-Allow-Origin' 标头出现在请求的资源。因此不允许使用原点“http://localhost:3000” 使用权。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 CORS 的资源。

我该如何解决这个问题？

【问题讨论】：

标签： php laravel-5 fetch react-redux

【解决方案1】：

当您在站点 A 上并调用（使用 ajax 请求）不同的服务器 B (different port, different domain name / ip address or different protocol) 时，浏览器希望 B 明确允许 A。这是通过服务器 B 添加的 HTTP 响应标头完成的（以及 OPTIONS 支持），请参阅 CORS (Cross-Origin Resource Sharing)。

如果您必须能够在生产环境中从其他服务器调用您的 API，添加 CORS support in laravel 是个好主意。如果您不需要它们，请不要添加它们。

如果您的 API 调用是 simple enough 和 don't require cookies，您可以将本地 Apache 配置为仅 add the header Access-Control-Allow-Origin: *。

否则，您应该提供来自同一来源的两种资源（API 和反应前端）。

【讨论】：

【解决方案2】：

您需要在运行 http:/my-domain.dev/api 的本地网络服务器上设置 CORS 标头

要发送的标头：Access-Control-Allow-Origin: http://my-domain.dev/api

这可能对 Laravel 有帮助 github.com/barryvdh/laravel-cors

【讨论】：