Question

我正在向我的反应应用localhost:8080发送请求到我的流明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标头，以允许从其他域使用它。

您有两种方法可以解决此问题：

在您的API回复中添加正确的CORS，已准备好使用此类https://github.com/barryvdh/laravel-cors之类的解决方案，或者您甚至可以制作自己的https://gist.github.com/danharper/06d2386f0b826b669552
使用将添加CORS标头的代理（可以使用网络服务器配置将CORS标头添加到响应中）
使用JSONP

关于JSONP - 它是非常有效的选项，它可以工作......

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

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

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

1 个答案: