从react调用API端点时出现ERR_NAME_NOT_RESOLVED错误

Question

请参阅我之前的文章API网关缺少身份验证令牌

我对逻辑进行了更改，我现在使用 AWS::Serverless::Function 来触发批处理作业，并且现在已附加到 API 网关。

对应的 CF 脚本：

MyLambdaFunction:
  Type: AWS::Serverless::Function
  Properties:
    Description: >
      Currently does not support S3 upload event.
    Handler: index.handler
    Runtime: nodejs20.x
    FunctionName:
      !Sub
        - "${TheEnv}-${TheAppNameForResources}-get-v1"
        - TheEnv: !Ref Environment
          TheAppNameForResources: !Ref AppNameForResources
    CodeUri: .
    MemorySize: 10240
    Role: !GetAtt MyLambdaExecutionRole.Arn
    Events:
      MyDemoAPI:
        Type: Api
        Properties:
          RestApiId:
            Ref: MyApiGateway
          Path: /batch
          Method: GET
    Tracing: Active
    Tags:
      AppName: !Ref AppNameForTags
      Cost: !Ref CostTagValue

MyApiGateway:
  Type: AWS::Serverless::Api
  Properties:
    Name:
      !Sub
      - '${TheEnv}-${TheAppNameForResources}-api'
      - TheEnv: !Ref Environment
        TheAppNameForResources: !Ref AppNameForResources
        TheBucketRegion: !Ref AWS::Region
    StageName: test
    TracingEnabled: true
    OpenApiVersion: 3.0.2

AWS Batch 函数是一个 Docker 映像，我在我的 ECS 中引用了该映像。 当我从浏览器调用 API 端点时，lambda 函数成功执行并开始我的批处理作业。

在此之后，我添加了一个小型 React 应用程序，其中我指的是我的 API 网关 URL。 React 应用程序可通过负载均衡器（应用程序）访问 我有一个按钮来触发批处理作业（我的意思是触发 lambda 函数，进而触发批处理作业）。

当我尝试通过 ALB DNS 访问 React 应用程序时，收到此错误

“您需要启用 Javascript 才能运行此应用程序”（从 Chrome 开发者工具中看到）

之前的错误（即这篇文章的标题）在我添加后现在消失了 模式： TriggerButton.jsx 中的“no-cors”并将方法：POST 更改为方法：GET

这是我的 lambda 函数和 React 应用程序的代码。

const { BatchClient, SubmitJobCommand } = require("@aws-sdk/client-batch"); // CommonJS import
const config = {
         region: "us-east-1",
    };

const batchClient = new BatchClient(config);
exports.handler = async(event, context) => {
    const params = {
     jobDefinition: "dev-login-test",
     jobName: "test-poc",
     jobQueue: "dev-test-jq-alpha",
   };

try {
    const command = new SubmitJobCommand(params);
    const data = await batchClient.send(command);
    console.log('Job Submitted successfully...', data);
    return {
        statusCode: 200,
        body: JSON.stringify('Job submitted -> ok'),
    };
} catch(error) {
    console.error('Error starting batch job: ', error);
    return {
        statusCode: 500,
        body: JSON.stringify('Error submitting job: ', error),
    };
  }
};

反应代码如下：

import logo from './logo.svg';
import './App.css';
import TriggerButton from './TriggerButton';

function App(){
  return (
    <div className="App">
      <h1>My React app</h1>
      <TriggerButton /> {/* Render TriggerButton component */}
    </div>
 );
}

TriggerButton.jsx代码：

import React from 'react';
class TriggerButton extends React.Component {
    handleClick = async() => {
    try {
      const response = await fetch("https://wxxxxxxx97.execute-api.us-east- 
      1.amazonaws.com/test/batch", {
        mode: 'no-cors',
        method: 'GET',
        headers: {
          //'Content-Type': 'application/json',
          "Access-Control-Allow-Headers" : "Content-Type",
          "Access-Control-Allow-Origin" : '*',
          "Access-Control-Allow-Methods" : '*',
        },
      });

  if (response.ok) {
        console.log('Lambda function triggered successfully');
        //Add any additional logic or UI changes upon successful execution
    } else {
        // Handle error
        console.error('Failed to trigger Lambda function: ');
    }
  } catch (error) {
    // Handle network errors
    console.error('Error triggering Lambda function: ');
  }
};
render() {
  return (
    <div>
      <button onClick={this.handleClick}>Trigger Lambda function</button>
    </div>
    );
  }
}
export default TriggerButton;

我不确定此错误消息表示什么。非常感谢解决此问题的任何帮助。 我不确定这是否是 CORS 问题。

Answer 1

这可能是 CORS 问题。您可以尝试一些事情来确定情况是否确实如此。尝试将 Cors 属性添加到您的 AWS::Serverless::Api，

MyApiGateway:
  Type: AWS::Serverless::Api
  Properties:
    Name: ...
    StageName: ...
    TracingEnabled: true
    OpenApiVersion: 3.0.2
    Cors:
      AllowMethods: "*" #adjust based on your requirements if needed
      AllowHeaders: "*" #adjust based on your requirements if needed
      AllowOrigin: "'*'" #adjust based on your requirements if needed

也在 Lambda 函数的响应中包含 CORS 标头。虽然 API 网关中的 CORS 标头有助于处理预检 (OPTIONS) 请求，但在 Lambda 函数响应中包含 CORS 标头可确保浏览器也正确处理实际请求（GET 请求）。

   // CORS headers
    const response = {
      statusCode: 200,
      headers: {
        "Access-Control-Allow-Origin": "*", // adjust based on your requirements if needed
        "Access-Control-Allow-Headers": "*", // adjust based on your requirements if needed
        "Access-Control-Allow-Methods": "*", // adjust based on your requirements if needed
      },
      body: JSON.stringify('Job submitted -> ok'),
    };

    return response

您还应该从 React fetch 方法的 headers 部分中删除自定义 headers。由于您已经在服务器端（API 网关）配置了 CORS 设置，因此您无需在客户端的提取请求中显式设置与 CORS 相关的标头。