Javascript AWS API网关CORS问题-JS

Javascript AWS API网关CORS问题-JS,javascript,cors,Javascript,Cors,我在CORs请求中遇到了一些问题,我不确定我做错了什么 我使用以下代码发布到AWS中的API网关,返回时出现以下错误:“请求标头字段Access Control Allow Origin不允许飞行前响应中的Access Control Allow标头使用Access Control Allow Origin。” 但在我的飞行前响应中,它的访问控制允许原点是“*” 以下是我的JS代码: <input type="button" id="click" value="Click Me">

我在CORs请求中遇到了一些问题,我不确定我做错了什么

我使用以下代码发布到AWS中的API网关,返回时出现以下错误:“请求标头字段Access Control Allow Origin不允许飞行前响应中的Access Control Allow标头使用Access Control Allow Origin。”

但在我的飞行前响应中,它的访问控制允许原点是“*”

以下是我的JS代码:

<input type="button" id="click" value="Click Me">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

    $(document).ready(function(){

    var settings = {
          "async": true,
          "crossDomain": true,
          "url": url,
          "method": "POST",
          "headers": {
            "Access-Control-Allow-Origin": "*",
            "Cache-Control": "no-cache"
        }
    }

        $("#click").click(function() {
            $.ajax(settings).done(function (response) {
                alert(response);
            });
        });
    });

</script>

<p id='test'></p>
响应头

.   access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
.   access-control-allow-methods: DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT
.   access-control-allow-origin: *
.   content-length: 0
.   content-type: application/json
.   date: Wed, 14 Mar 2018 05:54:46 GMT
.   status: 200
.   via: 1.1 d112d3017705f4a4c66a2958899eb08b.cloudfront.net (CloudFront)
.   x-amz-cf-id: 97nK6qkoiCsMa6TvJvWGUYEevT2bWE4nlKcM8P8sthVeIk9E2BPN9Q==
.   x-amzn-requestid: 33279618-274c-11e8-97da-ffa5e9493919
.   x-cache: Miss from cloudfront
请求头

.   :authority: apikey.execute-api.ap-southeast-2.amazonaws.com
.   :method: OPTIONS
.   :path: /outageCheck?test=test
.   :scheme: https
.   accept: */*
.   accept-encoding: gzip, deflate, br
.   accept-language: en-GB,en-US;q=0.9,en;q=0.8
.   access-control-request-headers: access-control-allow-origin,cache-control
.   access-control-request-method: POST
.   origin: http://127.0.0.1:62332
.   user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36
控制台错误:


加载失败:飞行前响应中的访问控制允许标头不允许请求标头字段访问控制允许原点。

这篇文章将帮助您在API网关上启用CORS

  • 登录API网关控制台(位于)

  • 在API网关控制台中,选择API下的API

  • 在“资源”下选择一个资源。这将为所有的应用程序启用CORS 资源上的方法。或者,您可以在资源下选择要启用的方法 CORS仅适用于此方法

  • 从操作下拉菜单中选择启用CORS

    • 选择启用CORS
  • 在启用CORS窗体中,执行以下操作:

    • Access Control Allow Headers
      输入字段中,键入静态字符串 客户端必须在其中提交的以逗号分隔的标题列表 资源的实际请求。使用控制台提供的标题 名单
      内容类型、X-Amz-Date、授权、X-Api-Key、X-Amz-Security-Token
      或者指定您自己的标题

    • 使用控制台提供的值“*”作为 Access Control Allow Origin标头值,用于允许来自的访问请求 所有域,或为来自的所有访问请求指定一个命名域 指定的域

    • 选择启用CORS并替换现有CORS标头

  • 在“确认方法更改”中,选择“是”,将现有值覆盖到 确认新的CORS设置


  • 我用一个远程URL尝试了这个脚本,它似乎可以工作。您是否尝试过点击其他的
    API
    ?您是否可以为飞行前选项请求(如果有)和您试图发出的GET/POST请求提供一整套您看到的请求和响应标题。当然可以,请查看我的编辑,谢谢!感谢Gokul,我实际上已经在我的AWS API网关上启用了CORS,这反过来又自动创建了一个选项方法。确保“访问控制允许来源”为“*”,并保留提供的默认标头。我实际上已经尝试过上面的JS代码通过postman发布,它似乎有效,我实际上使用我的本地机器编写客户端代码,这可能是问题所在吗?api返回JSON您是否尝试过从请求中删除
    访问控制允许来源
    缓存控制
    头并重试?它们不在由
    选项
    响应返回的允许
    标题列表中。感谢Gokul,我尝试了你建议的两种方法,在我的选项响应中添加了Access Control Allow Origin和cache Control header并将其完全删除,现在我收到了这个错误“请求的资源上不存在“Access Control Allow Origin”标题。”即使我在我的js中设置了它,或者从我的js中删除了它。啊啊啊,我对此感到非常抱歉。非常感谢您的帮助和时间。
    
    .   :authority: apikey.execute-api.ap-southeast-2.amazonaws.com
    .   :method: OPTIONS
    .   :path: /outageCheck?test=test
    .   :scheme: https
    .   accept: */*
    .   accept-encoding: gzip, deflate, br
    .   accept-language: en-GB,en-US;q=0.9,en;q=0.8
    .   access-control-request-headers: access-control-allow-origin,cache-control
    .   access-control-request-method: POST
    .   origin: http://127.0.0.1:62332
    .   user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36