Search code examples
javascriptamazon-web-servicesapiamazon-s3bucket

How configure redirect to api on AWS S3 hosting static website?

The idea is basically redirect calls to /api to some origin. for example ==> http://my-production-api.com/

I have my html file, 

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Redirect - API</title>
	<script>
		const api = 'https://jsonplaceholder.typicode.com';

		fetch(api + '/todos/1')
			.then(response => response.json())
			.then(json => console.log(json)).catch(console.log);

		const ENV_API = '/api';

		fetch(ENV_API + '/todos/1')
			.then(response => response.json())
			.then(json => console.log(json)).catch(console.log);
	</script>
</head>

<body>
	<div id="app">
		Redirect api
	</div>
</body>

</html>

and the next routing rule:

<RoutingRules>
<RoutingRule>
    <Condition>
        <KeyPrefixEquals>/api</KeyPrefixEquals>
    </Condition>
    <Redirect>
        <ReplaceKeyWith>https://jsonplaceholder.typicode.com</ReplaceKeyWith>
    </Redirect>
</RoutingRule>

but, the result in console is : Failed to load resource: the server responded with a status of 403 (Forbidden).

thanks for aswer my question!!

Solution

  • I did resolved with :

    <RoutingRules>
<RoutingRule>
<Condition>
    <KeyPrefixEquals>api/</KeyPrefixEquals>
</Condition>
<Redirect>
    <HostName>jsonplaceholder.typicode.com</HostName>
    <ReplaceKeyPrefixWith></ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>