使用Visual Studio Code时如何解决示例页面的CORS跨域问题

你遇到的Access-Control-Allow-Origin报错根源是被请求的AWS API Gateway接口未配置跨域资源共享规则，不属于前端代码逻辑问题，按照以下步骤操作即可解决：

1 修正前端代码错误 #

你当前代码中script标签的crossorigin属性取值错误，anonymous和use-credentials为互斥的二选一配置项，不能用竖线拼接，且该属性仅控制脚本自身的跨域加载，不影响XHR请求的跨域逻辑，修正后的前端代码如下：

<!DOCTYPE html>
<html>
<body>
<div id="id01"></div>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "https://xzssfrhno7.execute-api.us-east-2.amazonaws.com/items/aabbccdd234";
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    myFunction(myArr);
  }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
  var out = "";
  var i;
  for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + 
    arr[i].display + '</a><br>';
  }
  document.getElementById("id01").innerHTML = out;
}
</script>
</body>
</html>

2 配置AWS API Gateway跨域规则 #

这是解决报错的核心步骤，操作如下：

• 进入AWS控制台的API Gateway管理页，找到对应接口所属的API，定位到/items/{id}资源
• 点击「操作」下拉菜单，选择「启用CORS」选项
• 开发测试阶段可将Access-Control-Allow-Origin设置为*，生产环境替换为你前端页面实际部署的域名
• 允许的HTTP方法中勾选GET，同时保留默认自动生成的OPTIONS预检请求配置
• 保存配置后，务必重新部署对应阶段的API，配置才会生效

3 补充Lambda返回头（仅适用Lambda代理集成场景） #

如果你使用的是Lambda代理集成模式，需要在Lambda函数的返回值中手动添加CORS响应头，示例如下：

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET, OPTIONS",
            "Access-Control-Allow-Headers": "Content-Type"
        },
        body: JSON.stringify([
            // 你要返回的业务数据
        ])
    };
    return response;
};

内容的提问来源于stack exchange，提问作者a_l_e_x