使用 fetch API 从 laravel 创建自定义响应

Question

我目前正在使用以下代码向我的 laravel API 发出 POST 请求...

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);
    });

路线如下...

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

虽然我配置了cors模式，但我实际使用的是no-cors.

我的控制器 Test@save 看起来像...

class Test extends Controller
{

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

我正在尝试将字符串 here 发送回提取请求。但是在我的提取请求中，当我执行 console.log(response) 时，我得到以下响应...

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

有什么方法可以使用我的 Laravel 路由发送自定义响应吗？如果可以，我该怎么做？

Answer 1

您可以试试：

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

Answer 2

你快到了。您必须 return 另一个承诺，即获取文本或 json 来自 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);
});

另外，你需要进行cors请求，否则无法访问响应。如果您想接受来自所有来源

的 ajax 请求，您需要将此全局中间件添加到 laravel

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

阅读 This article 全局中间件。

使用 fetch API 从 laravel 创建自定义响应

Create a custom response from laravel using fetch API

fetch

laravel

reactjs