Create a custom response from laravel using fetch API

Question

I am currently making a POST request to my laravel API using the following code...

fetch('http://laravel.dev/content', {
        method: 'POST',
        mode:'no-cors',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin':'*'
        },
        body: JSON.stringify({

        })
    })
    .then((response) => {
        console.log(response);
    });

The route looks as follows...

Route::post('/content', array('middleware' => 'cors', 'uses' => 'Test@save'));

Although I have configured cors mode, I am actually using no-cors.

My controller Test@save looks like...

class Test extends Controller
{

    public function save() 
    {
       echo "here";
    }
}

I am trying to send the string here back to the fetch request. But in my fetch request, when I do console.log(response), I get the following response...

Response {type: "opaque", url: "", status: 0, ok: false, statusText: "" ...}

Is there any way to send a custom response using my Laravel route? If so, how do I do so?

Amit Gupta · Accepted Answer · 2016-11-15 18:04:34Z

1

You can try as:

public function save() 
{
    return response()->json(['data' => 'here']);
}

The json method will automatically set the Content-Type header to application/json, as well as convert the given array into JSON using the json_encode PHP function.

Docs

edited Nov 15, 2016 at 18:04

answered Nov 15, 2016 at 17:58

Amit Gupta

17.7k5 gold badges46 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zackify · Accepted Answer · 2016-11-15 18:18:23Z

1

You are almost there. You must return another promise, that gets text or json from fetch:

fetch('http://laravel.dev/content', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({

    })
})
.then((response) => response.text()) //or response.json()
.then((text) => {
    console.log(text);
});

Also, you need to make a cors request, otherwise you can't access the response. You'll need to add this global middleware to laravel if you want to accept ajax requests from all origins

<?php
namespace App\Http\Middleware;
use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE,OPTIONS')
            ->header('Access-Control-Allow-Headers', 'content-type');
    }
}

Read This article on global middleware.

edited Nov 15, 2016 at 18:18

answered Nov 15, 2016 at 18:08

zackify

5,4542 gold badges24 silver badges28 bronze badges

8 Comments

buydadip Over a year ago

I set up this exact middle ware, but I still get the error message

Fetch API cannot load http://laravel.dev/content. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

zackify Over a year ago

You have to add it to your list of middleware inside of app/Http/Kernel.php

buydadip Over a year ago

I did. But I still get an error and I can't figure out why. I can make a repo on github if that helps, as I feel like I've tried everything to get it to work.

zackify Over a year ago

Well what is the error now? I have built many react apps powered by a laravel backend. I'd love to help.

buydadip Over a year ago

this is the error message currently

Fetch API cannot load http://laravel.dev/content.  Response to preflight request doesn't pass access  control check: No 'Access-Control-Allow-Origin' header  is present on the requested resource.

|

Collectives™ on Stack Overflow

Create a custom response from laravel using fetch API

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related