Getting ERR_BAD_REQUEST when hitting 3rd party API from an Hydrogen storefront deployed in Oxygen

Getting ERR_BAD_REQUEST when hitting 3rd party API from an Hydrogen storefront deployed in Oxygen

miguel1vega
Shopify Partner
6 0 2

I am using Axios in my Hydrogen v2 storefront to fetch some external data from a route's loader. Axios calls an API that is served by an Express.js app deployed on EC2. When I run the project locally or using ngrok, the API call works, but when deployed in Oxygen, I get "ERR_BAD_REQUEST" and status 403. Here the complete response: 

 

{"message":"Request failed with status code 403","name":"AxiosError","stack":"AxiosError: Request failed with status code 403\n at M.from (worker.mjs:1288:14655)\n at fetch (worker.mjs:1290:10911)\n at async fr.request (worker.mjs:1292:1859)\n at async Ha.getFavorites (worker.mjs:1293:5041)\n at async y3 (worker.mjs:1328:296)\n at async $k (worker.mjs:185:471)\n at async worker.mjs:49:18074\n at async RC (worker.mjs:49:18524)\n at async Promise.all (index 2)\n at async jC (worker.mjs:49:17175)\n at fr.request (worker.mjs:1292:1952)\n at async Ha.getFavorites (worker.mjs:1293:5041)\n at async y3 (worker.mjs:1328:296)\n at async $k (worker.mjs:185:471)\n at async worker.mjs:49:18074\n at async RC (worker.mjs:49:18524)\n at async Promise.all (index 2)\n at async jC (worker.mjs:49:17175)\n at async h (worker.mjs:49:15547)\n at async f (worker.mjs:49:15230)","config":{"transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false},"adapter":["xhr","http","fetch"],"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1,"env":{},"headers":{"Accept":"application/json","Content-Type":"application/json"},"baseURL":"http://18.118.193.60:80/","method":"get","url":"/favorites/7371669831939"},"code":"ERR_BAD_REQUEST","status":403}

 

I already allowed all origins in my ec2 inbound and express.js cors policy. (This project is a technical assessment so no problem with security)

 

Here the API client that Hydrogen is using to fetch: 

import axios from 'axios';

class GoodAmericanApiClient {
  static client = axios.create({
    //baseURL: 'http://localhost:80/',
    baseURL: 'http://18.118.193.60:80/',
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
    },
  });

  static get(path, config = {}) {
    return GoodAmericanApiClient.client.get(path, config);
  }

  static post(path, data, config = {}) {
    return GoodAmericanApiClient.client.post(path, data, config);
  }

  static patch(path, data, config = {}) {
    return GoodAmericanApiClient.client.patch(path, data, config);
  }

  static delete(path, data, config = {}) {
    return GoodAmericanApiClient.client.delete(path, {data, ...config});
  }
}

export {GoodAmericanApiClient};

 

Building Shopify Blockchain Apps
Reply 1 (1)

jamalsoueidan
Shopify Partner
63 3 3

Try to fetch any other public api from your hydrogen, if it works, you know there is something wrong with EC2, if it doesnt work you know their is issue with Axios 🙂

 

From there you can take step 2