CloudFront got X-Cache: Error from cloudfront with

I was trying to host my site example.com using CloudFront with two S3 origins.S3-main for the site and S3-resources for the resources.

So I set S3-main as the default(*). And S3-resources with path pattern resources/*.

When I go https://example.com I successfully loaded index.html under S3-main
But when I tried to GET https://example.com/resorces/something.jpg I got again https://example.com/index.html with header like below:

http GET https://example.com/resources/something.jpg

HTTP/1.1 200 OK
Accept-Ranges: bytes
Connection: keep-alive
Content-Length: 1518
Content-Type: text/html
Date: Thu, 17 Aug 2017 03:29:52 GMT
ETag: "9776b731a6c42de14c929c10b4fec28c"
Last-Modified: Thu, 17 Aug 2017 01:56:41 GMT
Server: AmazonS3
Via: 1.1 xxxxxxx.cloudfront.net (CloudFront)
X-Amz-Cf-Id: 3OVCtUAk8mGzKt2OJD5gX9KRLHG3CBSHXf-xxxxxxxx==
X-Cache: Error from cloudfront

Why did I get HTTP/1.1 200 OK and X-Cache: Error from cloudfront the same time? Why did I get index.html rather than something.jpg as I expected?

Note

I can get the image through S3-resources.s3.amazonaws.com

http GET https://S3-resources.s3.amazonaws.com/resources/something.jpg

Accept-Ranges: bytes
Content-Length: 176182
Content-Type: image/jpeg
Date: Thu, 17 Aug 2017 04:11:55 GMT
ETag: "xxxxxxx84b05fb6564323c"
Last-Modified: Thu, 17 Aug 2017 02:59:12 GMT
Server: AmazonS3
x-amz-id-2: xxxx/xxxl+ijjM3YTxtQ4LpdHReEOhUvAz7uPFmVwzs8Foe4WOE=
x-amz-request-id: XXXX145CA3

+--------------------+
| NOTE: binary data  |
+--------------------+

Check your distribution settings... specifically, the Error Pages tab.

If you have configured custom error responses, it sounds like you have configured them incorrectly. It is possible to substitute content and rewrite the HTTP status code when an error occurs, and the behavior you are reporting would be exactly consistent with such a (mis)configuration.

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/custom-error-pages.html