CloudFront redirect all requests with path prefix
<p>I have a static web site which makes requests to an API server. I'm hosting this static pages with S3 and I'd like to use CloudFront to redirect the api calls to the api server. Api calls can be distinguished by a path prefix of api:</p>

<pre><code>domain.com/index.html         s3/index.html
domain.com/js/index.js        s3/js/index.html
domain.com/api/request        api_server/api/request
domain.com/api/other/request  api_server/api/other/request
</code></pre>

<p>I currently have two origins set up - one S3 origin for my S3 bucket (which is working) and another custom origin for my api server (which is not working).</p>

<p>The custom origin settings are as follows:</p>

<pre><code>Origin Domain Name: api_elb
Origin path: /
</code></pre>

<p>and the behavior settings are as follows:</p>

<pre><code>Precedence: 0
Path pattern: /api/*
Allowed HTTP Methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
Forward Headers: all
Forward Query Strings: yes
</code></pre>

<p>Here's the full response:</p>

<pre><code>&gt; GET /api/logout HTTP/1.1
&gt; Host: a0000aaaaaaaaa.cloudfront.net
&gt; User-Agent: curl/7.43.0
&gt; Accept: */*
&gt;
&lt; HTTP/1.1 502 Bad Gateway
&lt; Content-Type: text/html
&lt; Content-Length: 587
&lt; Connection: keep-alive
&lt; Server: CloudFront
&lt; Date: Mon, 06 Jun 2016 19:37:45 GMT
&lt; X-Cache: Error from cloudfront
&lt; Via: 1.1 86f2bbfea57d6217ce2d279b84ca3743.cloudfront.net (CloudFront)
&lt; X-Amz-Cf-Id: A18vpnPPr0cWn5VuVirvvKc-wocC9OcXjNDHZm-PyvD3ONGcPmqmmg==
&lt;
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;HTML&gt;&lt;HEAD&gt;&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"&gt;
&lt;TITLE&gt;ERROR: The request could not be satisfied&lt;/TITLE&gt;
&lt;/HEAD&gt;&lt;BODY&gt;
&lt;H1&gt;ERROR&lt;/H1&gt;
&lt;H2&gt;The request could not be satisfied.&lt;/H2&gt;
&lt;HR noshade size="1px"&gt;
CloudFront wasn't able to connect to the origin.
&lt;BR clear="all"&gt;
&lt;HR noshade size="1px"&gt;
&lt;PRE&gt;
Generated by cloudfront (CloudFront)
Request ID: -u68y2nD9tuaxL_2MjSk3udA1r64v-K3xoGitKFYvd9Z48gB8ntnwg==
&lt;/PRE&gt;
&lt;ADDRESS&gt;
&lt;/ADDRESS&gt;
</code></pre>

<p>What is wrong with this configuration? How can I get CloudFront to forward these requests to the API? It is currently returning 502 (Bad gateway) responses for all API requests. </p>