No 'Access-Control-Allow-Origin' error with Laravel and React

Question

I am sending a request from my react app localhost:8080 to my lumen api localhost:8000 to retrieve json data.

This is my routes.php in lumen: $app->get('list', 'ArticleController@listAll');

And this is my ArticleController.php in lumen:

<?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'));

    }
}

Because I get that error for cross domain fetch, I am trying to use jsonp, but for some reason it's still not working.

This is my code in React:

componentWillMount(){

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

Any help would be appreciated. I'm very new to this kind of stuff. Thanks

score 1 · Accepted Answer · edited May 23 '17 at 10:28

1

Problem is that your API server should return correct CORS headers, to allow using it from other domains.

You have two options to solve this:

Add correct CORS in your API responses, there is ready to use solutions like this one https://github.com/barryvdh/laravel-cors or you can even make your own https://gist.github.com/danharper/06d2386f0b826b669552
Use proxy that will add CORS headers (it is possible to add CORS headers to responses using webserver configuration)
Use JSONP

About JSONP - it is pretty valid option, and it will work...

But in your case it is not working, because fetch - is not the way you can use it.

JSONP is about creating script tag with your request url, and waiting for global callback specified in url to be called when script is loaded(What is JSONP all about?). You need to implement it on your own, or better - use libraries implementing it (for example jQuery)

edited May 23 '17 at 10:28

Community

1
1

answered Jul 05 '16 at 21:30

Bogdan Savluk

6,274
1
30
36

Thanks so much for your help, just one more question though. Would it be bad to use JSONP if the clients were random strangers? Like If i wanted to make a reddit clone where I have a server for all the json data and the cleint side gets all the data from the server by JSONP, will it be safe to use JSONP on my part? – Parkicism Jul 06 '16 at 14:28
Also with JSONP, you can only use the `GET` request and not `PUT` right? – Parkicism Jul 06 '16 at 14:36
Yes, it is not possible to send requests other than `GET` via `JSONP`. – Bogdan Savluk Jul 06 '16 at 14:44
There is few security concerns associated with JSONP, you should be aware of: at first, via `JSONP` server can send any JS response, not only JSON - so clients need to trust api provider; second - it can be subject to cross-site request forgery attacks. In general - better use CORS headers. – Bogdan Savluk Jul 06 '16 at 14:45
Hey, I just have one more problem. I used the cors header and I successfully got a response, but my response looks like this, http://i.imgur.com/NgSUZBA.png and I have no idea where my returned json is. Could you help me navigate to the location of my data? – Parkicism Jul 07 '16 at 15:04
it would be something like: `fetch('....').then(r=>r.json()).then(data=>console.log(data))` – Bogdan Savluk Jul 07 '16 at 15:37
Amazing! Thank you so much for your help. – Parkicism Jul 07 '16 at 15:44

No 'Access-Control-Allow-Origin' error with Laravel and React

1 Answers1