CODEWITHSUNDEEP
reactjslaravelapachecorsdevops
Jegan S
Jegan S

Reputation: 27

react app and laravel API in different domain showing CORS error

my react app on production mode (https://www.cli-domain.com) -> main domain, it's using laravel API server (https://admin.cli-domain.com) -> subdomain created by apache virtual host, both domain are running on same server,

whenever i'm trying to send request from react app to API, it showing CORS error.

i'm using axios for api request, i set headers fields Access-Control-Allow-Origin * on my client side,

on my laravel API i used fruitcake/cors package to handle middleware via allow cross origin requests, as well i tried with htaccess Header allow cross origin snippets, and i use laravel Cors.php file to allow cross origin method,

everything ended up with failure result,

still i can't able to send a successful request to my laravel API,

please assist me achieve this is possible

Here i attach .htaccess method for reference

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

and then another try with fruitcake / cors package reference code

protected $middleware = [
    ...
\Fruitcake\Cors\HandleCors::class, # this line
];

Cors.php

    <?php

return [

    /*
    |--------------------------------------------------------------------------
    | Laravel CORS Options
    |--------------------------------------------------------------------------
    |
    | The allowed_methods and allowed_headers options are case-insensitive.
    |
    | You don't need to provide both allowed_origins and allowed_origins_patterns.
    | If one of the strings passed matches, it is considered a valid origin.
    |
    | If ['*'] is provided to allowed_methods, allowed_origins or allowed_headers
    | all methods / origins / headers are allowed.
    |
    */

    /*
     * You can enable CORS for 1 or multiple paths.
     * Example: ['api/*']
     */
    'paths' => ['api/v1/tasker/profileupload', '*'],

    /*
    * Matches the request method. `['*']` allows all methods.
    */
    'allowed_methods' => ['POST', 'GET', 'DELETE', 'PUT', '*'],

    /*
     * Matches the request origin. `['*']` allows all origins. Wildcards can be used, eg `*.mydomain.com`
     */
    'allowed_origins' => ['https://www.doain-cus.com'],

    /*
     * Patterns that can be used with `preg_match` to match the origin.
     */
    'allowed_origins_patterns' => ['Google/'],

    /*
     * Sets the Access-Control-Allow-Headers response header. `['*']` allows all headers.
     */
    'allowed_headers' => ['X-Custom-Header', 'Upgrade-Insecure-Requests', '*'],

    /*
     * Sets the Access-Control-Expose-Headers response header with these headers.
     */
    'exposed_headers' => [],

    /*
     * Sets the Access-Control-Max-Age response header when > 0.
     */
    'max_age' => 0,

    /*
     * Sets the Access-Control-Allow-Credentials header.
     */
    'supports_credentials' => false,
];

Upvotes: 0

Views: 715

Answers (1)

Thibaut
Thibaut

Reputation: 343

If you use the HandleCors middleware you shouldn't set the headers in your .htaccess (it will end up with CORS error because headers can't be setted twice), your cors.php config file is enough. So you can remove these lines from your .htaccess:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

You also don't have to set it from the client side, it is a server side configuration.

Upvotes: 2

Related Questions