AWS S3 + CloudFront: Fonts not loading (CORS Problem) - amazon-s3

I added some custom fonts to my website and uploaded them to AWS S3 + CloudFront.
A lot of topics here describe this problem but non of them are solving my issue.
Using curl I get this output:
curl --head https://cdn.mzguru.de/fonts/sourcesanspro/source-sans-pro-v12-latin-ext_latin-700.woff2
HTTP/1.1 200 OK
Content-Type: binary/octet-stream
Content-Length: 25348
Connection: keep-alive
Date: Tue, 22 Oct 2019 11:54:18 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Last-Modified: Fri, 12 Apr 2019 10:54:26 GMT
ETag: "639c2738552a0376c91e7d485e476fda"
Cache-Control: max-age=62208000
Accept-Ranges: bytes
Server: AmazonS3
X-Cache: Hit from cloudfront
Via: 1.1 bae3e24625567f5728a5caa96d6b7669.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: FRA53
X-Amz-Cf-Id: iAy-QTfuV9ZqwmaRjXE0ramVSgsZkA6MtRmQOKDSonf6I8OabrpLZA==
Age: 12818
Within Chrome I get this error:
Access to font at 'https://cdn.mzguru.de/fonts/sourcesanspro/source-sans-pro-v12-latin-ext_latin-700.woff2' from origin 'https://www.monteurzimmerguru.de' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
This is the point where I do not understand the problem. The error message says: "No 'Access-Control-Allow-Origin' header is present"
But in the curl request I see this header. What is wrong?
Thank you
EDIT
I have attached a screenshot with the error messages.
EDIT 2: AWS Interface changed (2022)
Please take a look at #James Dean post.
1.) Do I need to tick the options box?
2.) I can not find the settings you describe. I guess the UI changed in the meanwhile.

Your S3 CORS configuration is correct based on below output:
>curl -vk "https://cdn.mzguru.de/fonts/sourcesanspro/source-sans-pro-v12-latin-ext_latin-700.woff2" -H "Origin: https://www.monteurzimmerguru.de"
< HTTP/2 200
< content-type: binary/octet-stream
< content-length: 25348
< date: Thu, 24 Oct 2019 12:19:41 GMT
< access-control-allow-origin: *
< access-control-allow-methods: HEAD, GET
< access-control-max-age: 3000
< last-modified: Fri, 12 Apr 2019 10:54:26 GMT
< etag: "639c2738552a0376c91e7d485e476fda"
< cache-control: max-age=62208000
< accept-ranges: bytes
< server: AmazonS3
< x-cache: Hit from cloudfront
However, Chrome/Browser is making OPTIONS/Preflight request on CloudFront and options request is not allowed on cloudfront currently. Only Head and GET are allowed.
curl -X OPTIONS "https://cdn.mzguru.de/fonts/sourcesanspro/source-sans-pro-v12-latin-ext_latin-700.woff2" -H "Origin: https://www.monteurzimmerguru.de"
>This distribution is not configured to allow the HTTP request method that was used for this request
To fix this , you need to do it:
In the CloudFront cache behaviour, you need to allow GET,HEAD and OPTIONS
In Cache behaviour, cache based on selected header, you should select Origin
Invalidate cache once and test it again.

You have to update,
Query String Forwarding and Caching to Forward all, cache based on all
in cloudfront Cache Behavior Settings ( cloudfont -> select one -> edit )

Related

Jmeter not showing up proper response instead giving details of server and connection details

I am using Jmeter 5.4.1 version, my API is of oauth1.0 type. When I ran my api through postman , it gave my proper json response for example an proper id, but the same api when ran through jmeter gives 200 response code but giving details of server and connection in response body and not the reponse that is expected(a proper id).
Below is the response :
HTTP/1.1 200 OK
Server: nginx/1.14.0 (Ubuntu)
Date: Wed, 12 May 2021 12:33:10 GMT
Content-Type: application/json; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Set-Cookie: PHPSESSID=eqvp0l22u2jo30moqn194meugp; expires=Wed, 12-May-2021 13:33:10 GMT; Max-Age=3600; path=/; domain=dev.moorup.no; HttpOnly
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache
X-Frame-Options: SAMEORIGIN
Cache-Control: no-store
enter image description here
You're looking at Response Headers tab of the View Results Tree listener therefore you're seeing the HTTP Response Headers
Just switch to Response Body tab and you will be able to see "raw" HTML Response and several options of rendering it:
Also be aware that it is possible to convert your Postman scripts to JMeter, for OAuth you will still have to do some correlation, but for the main logic record and replay should work more or less fine

GitHub Not Recognizing Passed Client ID and Secret

By registering your application you can increase your rate limit for GitHub's API from 60 to 5000 requests[1]. You don't have to use OAuth and can simply pass you're client ID and secret in the URL to have GitHub recognize your application[2]. But when I curl the rate limit check:
curl -i https://api.github.com/ratelimit?client_id=xxx&client_secret=yyy
The following is returned:
HTTP/1.1 200 OK
Server: GitHub.com
Date: Sat, 13 Jul 2013 01:53:50 GMT
Content-Type: application/json; charset=utf-8
Status: 200 OK
X-RateLimit-Limit: 60
X-RateLimit-Remaining: 51
X-RateLimit-Reset: 1373683093
X-GitHub-Media-Type: github.beta
X-Content-Type-Options: nosniff
Content-Length: 55
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: ETag, Link, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes
Access-Control-Allow-Origin: *
ETag: "[redacted]"
Cache-Control: max-age=0, private, must-revalidate
Vary: Accept-Encoding
{"rate":{"limit":60,"remaining":51,"reset":1373683093}}
Does anyone know what I'm doing wrong? Do I really have to use the full OAuth?
Putting the URL in quotes when running the command fixed the problem.
It's worth noting that you can also register "Personal Access Tokens" from the Applications menu option inside GitHub. This gives you a token with the increased 5,000 API calls/hour without having to do the OAuth dance.

Must-revalidate headers of this request wrong?

I noticed that chrome cached a video file. I replaced it with another one on the server and chrome kept serving the old one from cache (using JW flash player 5)
The headers of the request look like this:
joe#joe-desktop:~$ wget -O - -S --spider http://www.2xfun.de/files_geheimhihi14/20759.mp4
Spider mode enabled. Check if remote file exists.
--2011-05-15 22:40:56-- http://www.2xfun.de/files_geheimhihi14/20759.mp4
Resolving www.2xfun.de... 213.239.214.112
Connecting to www.2xfun.de|213.239.214.112|:80... connected.
HTTP request sent, awaiting response...
HTTP/1.1 200 OK
Date: Sun, 15 May 2011 20:40:56 GMT
Server: Apache
Last-Modified: Sun, 15 May 2011 20:37:59 GMT
ETag: "89b38-3bb227-4a35683b477c0"
Accept-Ranges: bytes
Content-Length: 3912231
Cache-Control: max-age=29030400, public, must-revalidate
Expires: Sun, 15 Apr 2012 20:40:56 GMT
Connection: close
Content-Type: video/mp4
Length: 3912231 (3.7M) [video/mp4]
Remote file exists.
I am using mod_headers and mod_expires in apache2 like this:
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4)$">
ExpiresDefault A29030400
Header append Cache-Control "public, must-revalidate"
</FilesMatch>
Did I spell revalidate wrong or something?
edit:
To make the use case clear: I want the files to be cached, because they are rather big and I want to save bandwidth. But on the other hand I want the files to be re-validated. So the client does a HEAD request and checks whether the content has changed (thats what the etag is for), and only re-fetches if necessary.
Your problem is that must-revalidate only kicks in once a cache entry is no longer fresh, but you've marked the response as cacheable for 29 million seconds. 'Cache-Control: max-age=0, must-revalidate' may be closer to what you want, if you want to allow caching but require revalidation on each use.

Issue with building an API on top of Devise

I'm building a JSON API on top of devise in order to be able to communicate from mobile devices.
So far so good, I am able to create a user account, to get an auth_token. But when I am trying to perform a PUT request, I get some problems , for example the update action for the user. The behavior is really stange, and I can't figure out what is wrong.
curl -i -H "Accept: application/json" 'http://localhost:3000/users' -X PUT -d 'auth_token=A830ALUv7ztTdSfl3qxFgi13BJpEf6VzNYe4yk8rEhVxbYYlOc0YMtTGMxkz&user[name]=plop'
Returns
HTTP/1.1 401 Unauthorized
Connection: close
Date: Wed, 02 Mar 2011 06:41:29 GMT
Content-Type: application/json; charset=utf-8
Cache-Control: no-cache
X-UA-Compatible: IE=Edge
X-Runtime: 0.157513
Transfer-Encoding: chunked
{"error":"You need to sign in or sign up before continuing."}
On the logs on the server i get this .... Really strange.
Started PUT "/users" for 127.0.0.1 at 2011-03-01 22:41:29 -0800
Processing by Users::RegistrationsController#update as JSON
Parameters: {"auth_token"=>"A830ALUv7ztTdSfl3qxFgi13BJpEf6VzNYe4yk8rEhVxbYYlOc0YMtTGMxkz", "user"=>{"name"=>"plop"}}
Completed in 1ms
Whereas if I modify just the name of the post value from user to users form example, the request works
HTTP/1.1 200 OK
Connection: close
Date: Wed, 02 Mar 2011 06:43:30 GMT
Content-Type: application/json; charset=utf-8
ETag: "5e1311709931861e469ce2c8a3b2d0e6"
Cache-Control: max-age=0, private, must-revalidate
X-UA-Compatible: IE=Edge
Set-Cookie: _u_session=BAh7CEkiGXdhcmRlbi51c2VyLnVzZXIua2V5BjoGRVRbCEkiCVVzZXIGOwBGWwZvOhNCU09OOjpPYmplY3RJZAY6CkBkYXRhWxFpUGGaQG%2FaX1pAfhpAaRpAexpAGkAaQ1JIiIkMmEkMTAkMDVBeDczV29UdVFEZHQxZ1JjN0NXdQY7AFRJjW9uRGlzcGF0Y2g6OkZsYXNoOjpGbGFzaEhhc2h7BjoLbm90aWNlSSIrWW91IHVwZGF0ZWQgeW91ciBhY2NvdW50IHN1Y2Nlc3NmdWxseS4GOwBUBjoKQHVzZWRvOghTZXQGOgpAaGFzaHsASSIPc2Vzc2lvbl9pZAY7AEYiJTcyNmIyZjJiODZhOTBiNjUwZDlhZmIwMzA5MTRkMTlm--0e15953fd7edecb0e08255349c4e55f1eddc8d81; path=/; HttpOnly
X-Runtime: 0.162436
Transfer-Encoding: chunked
{"redirect":"/","status":"ok"}
I precise that, even without my code(For the API) I can't perform this request !!!!
Thanks for your help !
I don't believe that Devise handles JSON calls, there is an open issue on github that is scheduled for the 1.3 release to address this problem.

Cliqset.com Error 403 while trying to update any data through API

I used both Fiddler and my test C# application to update my profile information in Cliqset.com through their API but I always get 403 error. It works well when I just want to get my profile info, not to update. I use all necessary HTTP headers, like CliqsetConsumerKey and Authorization.
Thank you.
When I try to get my status, I use this:
GET https://api.cliqset.com/user/cosmorocket/status HTTP/1.1
Authorization: Basic Y**********rZXQ6ZnVsY3J1bTA=
CliqsetConsumerKey: 11**********3c2ccd26c4ca946e3d8e
Host: api.cliqset.com
And it returns this:
HTTP/1.1 200 OK
Date: Fri, 10 Jul 2009 05:17:37 GMT
Server: Apache-Coyote/1.1
X-Powered-By: Servlet 2.4; JBoss-4.2.3.GA (build: SVNTag=JBoss_4_2_3_GA date=200807181417)/JBossWeb-2.0
Content-Type: application/xml
Content-Length: 153
Set-Cookie: csp=appInst2; path=/
Connection: close
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><StatusEntry><Updated>2009-06-09T18:09:29.315Z</Updated><Status>cliqsetting all day long</Status></StatusEntry>
But if I use the same credentials for updating with this request:
PUT https://api.cliqset.com/200905/user/cosmorocket/status HTTP/1.1
I get this:
HTTP/1.1 403 Forbidden
Date: Fri, 10 Jul 2009 05:25:04 GMT
Vary: Accept-Encoding
Content-Length: 9
Connection: close
Content-Type: text/html; charset=iso-8859-1
Error 403
I contacted tech support and solved the problem. Each time a new user uses my registered application it's necessary to make an authenticated GET
request to 'https://api.cliqset.com/200905/user/useridentifier'. Notice that you don't change 'useridentifier' to any other login name, just leave it as it is. This
will setup the appropriate permissions to update data.
I did this request and now it works well.