Laravel 和 React 没有“Access-Control-Allow-Origin”错误

Question

我正在从我的 react 应用 localhost:8080 向我的 lumen api localhost:8000 发送一个请求以检索 json 数据。

这是我的routes.php 流明：$app->get('list', 'ArticleController@listAll');

这是我的ArticleController.php 流明：

<?php

namespace App\Http\Controllers;

use Response;
use Illuminate\Support\Facades\Input;
use App\Article as Article;

class ArticleController extends Controller
{
    public function listAll(){
        $articles = Article::all();

        return response()
            ->json($articles)
            ->setCallback(Input::get('callback'));

    }
}

因为我在跨域获取时遇到了该错误，所以我正在尝试使用 jsonp，但由于某种原因它仍然无法正常工作。

这是我在 React 中的代码：

componentWillMount(){

    fetch('http://localhost:8000/list?callback=asdf', {
        method: 'GET'
    }).then(function(res) {
        console.log(res);
    }).catch(function(err) {
        console.log(err);
    })
}

任何帮助将不胜感激。我对这种东西很陌生。 谢谢

Answer 1

问题是您的 API 服务器应该返回正确的 CORS 标头，以允许从其他域使用它。

你有两个选择来解决这个问题：

1. 在您的 API 响应中添加正确的 CORS，有现成可用的解决方案，例如 https://github.com/barryvdh/laravel-cors，或者您甚至可以自己制作 https://gist.github.com/danharper/06d2386f0b826b669552
2. 使用将添加 CORS 标头的代理（可以使用 Web 服务器配置将 CORS 标头添加到响应中）
3. 使用 JSONP

关于 JSONP - 这是一个非常有效的选项，它会起作用......

但在你的情况下它不起作用，因为fetch - 不是你可以使用它的方式。

JSONP 是关于使用您的请求 url 创建脚本标签，并等待在加载脚本时调用 url 中指定的全局回调（What is JSONP all about?）。您需要自己实现它，或者更好地使用实现它的库（例如 jQuery）