typescript - NuxtJS Proxy to avoid CORS

Question

I have two axios instances with baseURLs "https://localhost:8082" and "https://localhost:8083" and my nuxtjs SSR server is running on "https://localhost:8081". I tried alot with proxies and CORS but nothing worked for me. Does anyone know, how to successfully configure @nuxtjs/proxy to work for my project? Important is that it must work with SSR.

Thanks.

question from:https://stackoverflow.com/questions/66051415/nuxtjs-proxy-to-avoid-cors

Answer 1

Trying to add CORS Policy on your APIs.

If using Lumen, create a Middleware with name CorsMiddleware.php

<?php namespace AppHttpMiddleware;

use Closure;

class CorsMiddleware
{
 /**
 * Handle an incoming request.
 *
 * @param  IlluminateHttpRequest  $request
 * @param  Closure  $next
 * @return mixed
 */
public function handle($request, Closure $next)
{
    $headers = [
        'Access-Control-Allow-Origin'      => '*',
        'Access-Control-Allow-Methods'     => 'POST, GET, OPTIONS, PUT, DELETE',
        'Access-Control-Allow-Credentials' => 'true',
        'Access-Control-Max-Age'           => '86400',
        'Access-Control-Allow-Headers'     => 'Content-Type, Authorization, X-Requested-With'
    ];

    if ($request->isMethod('OPTIONS'))
    {
        return response()->json('{"method":"OPTIONS"}', 200, $headers);
    }

    $response = $next($request);
    foreach($headers as $key => $value)
    {
        $response->header($key, $value);
    }

    return $response;
}}