What causes Axios to throw a 'Network Error' when sending authenticated requests to AWS API Gateway through Cognito?

huangapple go评论58阅读模式
英文:

What causes Axios to throw a 'Network Error' when sending authenticated requests to AWS API Gateway through Cognito?

问题

I am developing a web app. I have issues with authenticating access to my API gateway. When I run without Authorisation I can get the results. I read elsewhere that network error is due to CORS and I have implemented that and it was working without Authorisation.

My API gateway is working because when without authorization I am able to call and get the result:

My code:

const Dashboard = '/v1/dashboard/overview';

export default function Success() {
  useEffect(() => {
    const testAPI = async () => {
      try {
        const response = await axios.post(Dashboard);
        console.log(response.data.data);
      } catch (err) {
        console.log(err);
      }
    };
    testAPI();
  }, []);
  return;
}

and the results I get from my API call is:

['Data']

and my lambda function attached to my API gateway:

import json

def lambda_handler(event, context):
    print(event)
    
    response = {
        "category": "Success",
        "command": "Overview",
        "data": ['Data']
    }

    return {
        'statusCode': 200,
        'headers': {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "*"
        },
        'body': json.dumps(response)
    }

When I set my Method request Auth set to my cognito userPool to get authentication I suddenly got network errors. the idToken is the actual jwtToken in the string.

My code:

const Dashboard = '/v1/dashboard/overview';

export default function Success() {
  useEffect(() => {
    const testAPI = async () => {
      try {
        const response = await axios.post(
          Dashboard,
          {},
          {
            headers: {
              Authorization: idToken,
            },
          }
        );
        console.log(response.data.data);
      } catch (err) {
        console.log(err);
      }
    };
    testAPI();
  }, []);
  return;
}

I get this error:

AxiosError: Network Error, name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …

I tested with Postman and I managed to get the results without any issues. This means I have taken the correct jwtToken to verify, which I double-checked with Authorizers in AWS API gateway.

英文:

I am developing a web app. I have issues with authenticating access to my API gateway. When I run without Authorisation I can get the results. I read elsewhere that network error is due to CORS and I have implemented that and it was working without Authorisation.

My API gateway is working because when without authorization I am able to call and get the result:

My code:

const Dashboard = '/v1/dashboard/overview';

export default function Success() {
  useEffect(() => {
    const testAPI = async () => {
      try {
        const response = await axios.post(Dashboard);
        console.log(response.data.data);
      } catch (err) {
        console.log(err);
      }
    };
    testAPI();
  }, []);
  return;
}

and the results I get from my API call is:

['Data']

and my lambda function attached to my API gateway:

import json

def lambda_handler(event, context):
    print(event)
    
    response = {
    "category": "Success",
    "command": "Overview",
    "data": ['Data']
}

    return {
        'statusCode': 200,
        'headers': {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "*"
        },

        'body': json.dumps(response)
    }

When I set my Method request Auth set to my cognito userPool to get authentication I suddenly got network errors. the idToken is the actual jwtToken in the string.

My code:

const Dashboard = '/v1/dashboard/overview';

export default function Success() {
  useEffect(() => {
    const testAPI = async () => {
      try {
        const response = await axios.post(
          Dashboard,
          {},
          {
            headers: {
              Authorization: idToken,
            },
          }
        );
        console.log(response.data.data);
      } catch (err) {
        console.log(err);
      }
    };
    testAPI();
  }, []);
  return;
}

I get this error:

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

I tested with Postman and I managed to get the results without any issues. This means I have taken the correct jwtToken to verify, which I double-checked with Authorizers in AWS API gateway.

答案1

得分: 0

已解决!

将我的API网关设置为允许跨源资源共享(CORS)。

英文:

Solved!

Set my API gateway to allow CORS.

huangapple
  • 本文由 发表于 2023年5月24日 17:20:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76321953.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定