php - 公理 : Network Error with Vuejs

Question

我正在从 localhost:8080(前端)到 localhost:8000(后端)进行 axios 调用。

前端使用vue、webpack、node编写，后端使用lumen-laravel框架。

就是这样:

mounted() {
        axios.get('localhost:8000/getParentela').then((r) => {
            console.log(r.data);
            this.albero = r.data;
        }).catch((e) => {
            console.log(e);
        });
    },

调用返回的错误是:

我认为可能是因为 CORS，所以我在后端放置了一个中间件。

就是这样:

<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Response;
class CORSMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param \Illuminate\Http\Request $request
     * @param \Closure                 $next
     *
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        // TODO: Should check whether route has been registered
        if ($this->isPreflightRequest($request)) {
            $response = $this->createEmptyResponse();
        } else {
            $response = $next($request);
        }
        return $this->addCorsHeaders($request, $response);
    }
    /**
     * Determine if request is a preflight request.
     *
     * @param \Illuminate\Http\Request $request
     *
     * @return bool
     */
    protected function isPreflightRequest($request)
    {
        return $request->isMethod('OPTIONS');
    }
    /**
     * Create empty response for preflight request.
     *
     * @return \Illuminate\Http\Response
     */
    protected function createEmptyResponse()
    {
        return new Response(null, 204);
    }
    /**
     * Add CORS headers.
     *
     * @param \Illuminate\Http\Request  $request
     * @param \Illuminate\Http\Response $response
     */
    protected function addCorsHeaders($request, $response)
    {
        foreach ([
            'Access-Control-Allow-Origin' => '* ',
            'Access-Control-Max-Age' => (60 * 60 * 24),
            'Access-Control-Allow-Headers' => $request->header('Access-Control-Request-Headers'),
            'Access-Control-Allow-Methods' => $request->header('Access-Control-Request-Methods')
                ?: 'GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS',
            'Access-Control-Allow-Credentials' => 'true',
        ] as $header => $value) {
            $response->header($header, $value);
        }
        return $response;
    }
}

我仍然认为它是 CORS，因为如果直接使用 localhost:8000 调用 API，它就可以工作..

我读到可能是 ublock 阻止了请求，所以我禁用了它但没有任何变化。

但错误仍然存​​在，我知道该怎么做。 谢谢。

Answer 1

我使用 http 解决了我的错误

仅使用时出错:localhost:3000/api/product/getAllProducts

解决方法:http://localhost:3000/api/product/getAllProducts