Issue implementing Access-Control-Allow-Origin

[craigward]

Hi,

I seem to be having an issue getting this to work on my development machine (Laravel, Laravel Valet, Vuejs). I have added the following to the default config file:

    'allow_origins' => [
        'http://faq-front.test',
    ],
    'allow_methods' => [
        'GET',
        'OPTIONS'
    ],

    'allow_headers' => [
        'Content-Type',
        'X-Auth-Token',
        'Origin',
        'Authorization',
        'X-Requested-With'
    ],

    'expose_headers' => [
        'Cache-Control',
        'Content-Language',
        'Content-Type',
        'Expires',
        'Last-Modified',
        'Pragma',
    ],

But, When my front-end (Vuejs via Axios) tries to conenct I get:

Failed to load http://faq-app.test/api/questions/most-viewed: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://faq-front.test' is therefore not allowed access.

Here is the network information

General:
Request URL: http://faq-app.test/api/questions/most-viewed
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

Response Headers:
Access-Control-Allow-Headers: Content-Type, X-Auth-Token, Origin, Authorization, X-Requested-With
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Origin: http://faq-front.test
Access-Control-Max-Age: 86400
Cache-Control: no-cache, private
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html; charset=UTF-8
Date: Mon, 04 Jun 2018 09:52:20 GMT
Server: nginx/1.13.12
Transfer-Encoding: chunked
Vary: Accept-Encoding
X-Powered-By: PHP/7.2.5

Request Headers:
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,la;q=0.7
Access-Control-Request-Headers: x-requested-with
Access-Control-Request-Method: GET
Cache-Control: no-cache
Connection: keep-alive
Host: faq-app.test
Origin: http://faq-front.test
Pragma: no-cache
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

and

General:
Request URL: http://faq-app.test/api/questions/most-viewed
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

Response Headers:
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html; charset=UTF-8
Date: Mon, 04 Jun 2018 09:52:21 GMT
Server: nginx/1.13.12
Transfer-Encoding: chunked
Vary: Accept-Encoding
X-Powered-By: PHP/7.2.5

Request Headers:
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,la;q=0.7
Cache-Control: no-cache
Connection: keep-alive
Host: faq-app.test
Origin: http://faq-front.test
Pragma: no-cache
Referer: http://faq-front.test/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
X-Requested-With: XMLHttpRequest

What am I doing wrong?

[craigward]

It turns out that I had a dd(); in one of my controllers, the one that handles http://faq-app.test/api/questions/most-viewed. I put it there to initially find a problem I was having, but then saw the Failed to load http://faq-app.test/api/questions/most-viewed: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://faq-front.test' is therefore not allowed access. message and assumed it was that.

Removing the dd(); solved the issue, but I am sure I haven't had the pre-flight message before if I dd(); a result out.