相关疑难解决方法(0)

我已经设置了一个ASP.NET Web应用程序,从MVC 4/Web API模板开始.看起来好像工作得很好 - 我没有发现任何问题.我使用Chrome和Firefox浏览网站.我已经使用Fiddler进行了测试,所有的回复似乎都在钱上.

所以现在我继续编写一个简单的Test.aspx来使用这个新的Web API.脚本的相关部分:

<script type="text/javascript">
    $(function () {

        $.ajax({
            url: "http://mywebapidomain.com/api/user",
            type: "GET",
            contentType: "json",
            success: function (data) {

                $.each(data, function (index, item) {

                    ....

                    });
                }
                );

            },
            failure: function (result) {
                alert(result.d);
            },

            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("An error occurred, please try again. " + textStatus);
            }

        });

    });
</script>

这会生成一个REQUEST标头:

OPTIONS http://host.mywebapidomain.com/api/user HTTP/1.1
Host: host.mywebapidomain.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, …

我一直在为下面的错误而苦苦挣扎。我已经尝试了很多教程和 stackoverflow 答案，但没有一个解决方案可以解决我的问题。

从源“ http://localhost:3000 ”访问 XMLHttpRequest at ' https://xxx '已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin ' 请求的资源上存在标头。

我正在使用 SAM 无服务器来创建我的 api。

模板.yaml：

Globals:
  Function:
    Timeout: 10
  Api:
    Cors:
      AllowMethods: "'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT'"
      AllowHeaders: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'"
      AllowOrigin: "'*'"

我的 lambda 函数： 我的 GET 响应和 OPTIONS 响应都返回以下标头：

headers: {
  "Access-Control-Allow-Headers": "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'",
  "Access-Control-Allow-Origin": "'*'",
  "Access-Control-Allow-Methods": "'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT'"
}

我的 API 使用放大进入我的 ReactJs 应用程序：

API.get(apiName, path, {
   headers: {
      "Access-Control-Allow-Origin": "*",
      // "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,x-requested-with",
      // "Access-Control-Allow-Methods": "OPTIONS,POST,GET,PUT,DELETE",
      // 'Content-Type': 'application/json'
   }
})

我已经在我的 template.yaml、我的 lambda 函数和我的 reactJs 项目中尝试了 Access-Control-Allow-Headers、Access-Control-Allow-Methods …

Update 2 (A complete set of logs)

From Client's Perspective

Request headers:

POST /dev/micro_server.php HTTP/1.1 Host: production-server.com
Connection: keep-alive
Content-Length: 86
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html, /; q=0.01
Origin: https://debug.dev
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36 OPR/58.0.3135.90
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: https://debug.dev/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: debugger_session=iq4tbdk374mtvodsd3edcf2jq5

Response headers:

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 12 Mar 2019 12:01:27 GMT
Content-Type: text/html
Transfer-Encoding: chunked
Connection: keep-alive
X-Powered-By: PHP/5.5.9-1ubuntu4.17 …

我的FE应用程序正在使用来自不同域的API.我知道它应该触发CORS,但据我所知它不应该为每个请求创建预检.

根据文档,我不应该有预检请求的GET方法.

 Cross-site requests are preflighted like this since they may have implications to 
 user data. In particular, a request is preflighted if:

    - It uses methods other than GET, HEAD or POST. 
Also, if POST is used to send request data with a Content-Type 
other than application/x-www-form-urlencoded, multipart/form-data, 
or text/plain, e.g. if the POST request sends an XML payload to the
server using application/xml or text/xml, then the request is preflighted.
    - It sets custom …

我正在开发一个使用 React+Redux 并用于axios进行 api 调用的应用程序。

这是一个失败的调用示例：

axios.post(`${API_ROOT}${FIND_USER}${currentUserID}`, {
        headers: {
                'Authorization': token
        },
      })
    .then((response) => {
        console.log("Sucess")
    })

当我看到的请求网址network是这样的：

http://domainName:8080/users/findUser/1234

API 调用OPTIONS本身失败，我从后端收到的错误是

Response for preflight has invalid HTTP status code 403

它永远不会达到POST。

token是从 检索到的localstorage，类似于Bearer eyJhbGci...。

后端开发人员正在使用 Java 和 Spring 。

我调用 API 的方式是否有问题，或者这个问题应该在后端解决？

通过 Postman 测试时，这个 API 工作得很好。

我一直在尝试iron-ajax向服务器发送一个简单的帖子，但在飞行前调用时它一直失败。对于我的一生，我无法弄清楚发生了什么，服务器上的所有 CORS 标头似乎都是正确的。

Response headers

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Methods:GET, POST, PUT, OPTIONS
Access-Control-Allow-Origin:*
cache-control:must-revalidate, private, no-cache, no-store, max-age=0
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:138
Content-Type:text/html

Request headers

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Connection:keep-alive

该请求确实是从本地主机发出的，但我认为应该*处理这个问题。

控制台中显示的错误是： OPTIONS https://... 403 (Forbidden)和

XMLHttpRequest cannot load https://.... Response for preflight has invalid HTTP status code 403

任何帮助/建议表示赞赏。