以下是使用AWS API Gateway,Lambda和JavaScript CORS解决跨域问题的示例代码:
在AWS API Gateway中,你可以通过配置CORS来允许特定的源访问你的API。你可以在API Gateway的资源中设置CORS。
Resources:
MyApiGateway:
Type: AWS::ApiGateway::RestApi
Properties:
Name: MyApiGateway
MyApiGatewayResource:
Type: AWS::ApiGateway::Resource
Properties:
RestApiId: !Ref MyApiGateway
ParentId: !GetAtt MyApiGateway.RootResourceId
PathPart: myresource
MyApiGatewayMethod:
Type: AWS::ApiGateway::Method
Properties:
RestApiId: !Ref MyApiGateway
ResourceId: !Ref MyApiGatewayResource
HttpMethod: GET
AuthorizationType: NONE
Integration:
Type: AWS
IntegrationHttpMethod: POST
Uri: !Sub
- arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${LambdaFunction.Arn}/invocations
- LambdaFunction: !Ref LambdaFunction
MethodResponses:
- StatusCode: 200
RequestParameters:
- MethodRequestParameterName: integration.request.header.Origin
Required: true
MyApiGatewayOptionsMethod:
Type: AWS::ApiGateway::Method
Properties:
RestApiId: !Ref MyApiGateway
ResourceId: !Ref MyApiGatewayResource
HttpMethod: OPTIONS
AuthorizationType: NONE
Integration:
Type: MOCK
IntegrationResponses:
- StatusCode: 200
ResponseParameters:
method.response.header.Access-Control-Allow-Headers: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'"
method.response.header.Access-Control-Allow-Origin: "'*'"
method.response.header.Access-Control-Allow-Methods: "'GET,OPTIONS'"
MethodResponses:
- StatusCode: 200
ResponseParameters:
method.response.header.Access-Control-Allow-Headers: true
method.response.header.Access-Control-Allow-Methods: true
method.response.header.Access-Control-Allow-Origin: true
在Lambda函数中,你可以在HTTP响应头中设置CORS头部信息,以允许跨域访问。
exports.handler = async (event) => {
const response = {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE'
},
body: JSON.stringify('Hello from Lambda!')
};
return response;
};
在JavaScript中,你可以使用XMLHttpRequest或Fetch API来进行CORS请求。
使用XMLHttpRequest示例:
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/myresource', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send();
使用Fetch API示例:
fetch('https://api.example.com/myresource', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
以上是使用AWS API Gateway,Lambda和JavaScript CORS解决跨域问题的示例代码。请注意,示例代码中的API网关和Lambda函数的配置需要根据你的具体情况进行调整。