0

Update: See answer for resolution.

I have tried in .htaccess

Header always set Access-Control-Allow-Origin "http://localhost:3000"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, PUT, DELETE"
Header always set Access-Control-Allow-Headers "Origin,Content-Type,Accept,Authorization,X-Requested-With"
# Header always set Access-Control-Allow-Credentials true

AuthType Basic
AuthName "API Service"
AuthUserFile /Users/user/Documents/path/path/path/.htpasswd
Require valid-user

<IfModule mod_rewrite.c>
RewriteEngine On                  
RewriteCond %{REQUEST_METHOD} OPTIONS 
RewriteRule ^(.*)$ index.php [QSA,L]  
</IfModule>

How to resolve this for MAMP Pro Apache?

UPDATE:

Wrapping the basic auth block in appears to resolve the OPTIONS authentication preflight error but now getting : 

Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:3000', but only one is allowed. Origin 'http://localhost:3000' is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
atomicadam
  • 143
  • 12
  • To test with curl, you need to make curl send an OPTIONS request (as the browser does before trying the GET), like this: `curl -i -X OPTIONS --user user:password http://api.site.com/` – sideshowbarker Oct 10 '18 at 17:04
  • What’s the HTTP status code of the response to the OPTIONS request? The body of the response for the curl invocation shown in the question has *The server encountered an internal error or misconfiguration and was unable to complete your request* — which, despite the `200 OK` in the body, suggests that the HTTP response status code isn’t 200 but is instead some 5xx or 4xx status code. If the browser doesn’t see a 2xx response to the OPTIONS request, the preflight fails. – sideshowbarker Oct 10 '18 at 17:42
  • @sideshowbarker - this is not duplicate - it is similar to the post but it involved MAMP and all the headers for Apache are set correctly. This is not a duplicate. – atomicadam Oct 11 '18 at 02:04
  • Apache is responding exactly the way configuration shown in the question is telling it to respond. The 'Require valid-user' lines tells Apache to require authentication for all requests — including OPTIONS requests. See https://stackoverflow.com/a/31753542/441757 https://stackoverflow.com/a/19154721/441757 & https://stackoverflow.com/a/45623550/441757 etc and try wrapping the 'Require valid-user' line (or even the 4 lines from 'AuthType Basic' to 'Require valid-user') in a `…`. – sideshowbarker Oct 11 '18 at 02:39
  • @sideshowbarker - thank you - good suggestion and I learned a bit more about .htaccess - I have wrapped the block of basic auth code in the and am now getting this error: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:3000', but only one is allowed. Which I have search for a solution for but have yet to find a working one. Also, only 1 value is set in the .htaccess file, that is http://localhost:3000 – atomicadam Oct 11 '18 at 02:52
  • Ensure you don’t have any CORS extension installed and enabled. Those extensions add an 'Access-Control-Allow-Origin: *' response header to all responses. But if you test in multiple browsers and you still get that *“contains multiple values”* error in other browsers too, then that means the additional header really is coming from the server. So I dunno I guess you’d probably want to look into your PHP config to see if the header’s also being set somewhere in there. And if it’s not there, then I maybe it’s being set in the system /etc/apache2/httpd.conf or some file in a /etc/apache2/ subdir – sideshowbarker Oct 11 '18 at 03:27
  • @sideshowbarker - I think you are correct - it must be getting set from MAMP Apache - I was able to unset Access-Controll-Allow-Origin and then reset it in .htaccess and that fixed it. – atomicadam Oct 11 '18 at 04:36

1 Answers1

0

Was able to get this figured out with a bit of help from @sideshowbarker.

JS fetch looks like this:

fetch(endpoint, {
  headers: new Headers({
     'Authorization': 'Basic ' + Buffer.from('user:pass').toString('base64'),
     'Content-Type': 'application/json; charset=utf-8'
  }),
  mode: 'cors',
  method: 'GET',
  redirect: 'follow'
})
.then(res => res.json())
.then(json => console.log(json))

.htaccess looks like this

<IfModule mod_headers.c>
Header unset Access-Control-Allow-Origin
Header always set Access-Control-Allow-Origin "http://localhost:3000"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, PUT, DELETE"
Header always set Access-Control-Allow-Headers "Origin,Content-Type,Accept,Authorization,X-Requested-With"
# Header always set Access-Control-Allow-Credentials true
</IfModule>

<LimitExcept OPTIONS>
AuthType Basic
AuthName "API Service"
AuthUserFile /Users/adamlabarge/Documents/www/headless/tail/.htpasswd
Require valid-user
</LimitExcept>

To fix the multiple responses in Access-Control-Allow-Origin I unset Access-Control-Allow-Origin and reset it in .htaccess

Now I'm getting the JSON response I expected with a basic .htpasswd set on the api directory.

atomicadam
  • 143
  • 12