使用 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']);
}

json 方法会自动将Content-Type 标头设置为application/json，并使用 json_encode PHP 函数将给定数组转换为 JSON。

Docs

Answer 2

你快到了。您必须返回另一个承诺，从 fetch 中获取文本或 json：

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 了解全局中间件。