选项而不是 Post：对预检请求的响应未通过访问控制检查。

Posted 2023-03-04

【中文标题】选项而不是 Post：对预检请求的响应未通过访问控制检查。

【英文标题】：Option instead of Post: Response to preflight request doesn't pass access control check.

【发布时间】：2017-09-23 22:55:50

【问题描述】：

我正在尝试访问一个 rest api 源，它正在与邮递员或 http 请求者一起工作。我的代码有什么问题？

let keyUrl ="yourUrl"

getAPIKey()
   let headers = new Headers();
  //  headers.append('Content-Type', 'text/plain');
   headers.append('Authorization', 'Bearer ' + btoa(this.cred.user + ":" + this.cred.pw));
   headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
   headers.append("Access-Control-Allow-Headers","*");

   let options = new RequestOptions(

     headers: headers,
     method: RequestMethod.Post,

    );

    return this.http.post(this.keyUrl,options)
        .map((res: Response) => 
          console.log('##############')
          console.log(res.json())
        )
        .catch(this.handleError)
        .subscribe(
        status => console.log(status),
        error => this.handleError(error),
        () => console.log('DONE')
        );


     

我总是遇到错误：

对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin' 标头出现在请求的 资源。因此不允许使用原点“http://localhost:4200” 访问。

在我的后端，即使我发送了 http.post，post 请求也是“选项”。

【问题讨论】：

您的 API 需要接受 OPTIONS 请求。 （仅供参考，application/JSON 请求将始终发送 OPTIONS 请求，而 application/x-www-form-urlencoded 不会）

好的，纯文本同样的问题

【参考方案1】：

我也遇到了这个问题，我花了很长时间才找到正确的解决方案

您也必须在服务器端设置标头。他们本质上需要接受“OPTIONS”请求。

这可能取决于托管 REST-API 的服务器；如果您使用的是 Apache-Server，您可以将其添加到您的 httpd.conf 中，它应该可以工作：

<Directory />
Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
             Header set Access-Control-Allow-Origin "jakartab3:16090, epbtesti:16090, localhost:16090"
             Header set Access-Control-Allow-Credentials "true"
             Header add Access-Control-Allow-Headers "Content-Type, Accept"
             Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

或者，它也应该在您处理安全性的地方工作（如果您这样做的话）。在这种情况下，请将 HttpServletResponse 的标题设置为

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Origin-Methods", "GET, POST, OPTIONS");

希望这能解决您的问题

---

编辑：试图解释为什么你需要设置：

Access-Control-Allow-Origin 阻止其他服务器访问您的 REST 服务 - 并且您的 Angular 应用程序在它自己的服务器上运行，端口为 4200。为了让 Angular 应用程序能够访问您的 REST 服务，正如我已经说过的，您需要根据我的回答在托管您的 REST-Service 的服务器中设置标头；它无法在其他地方工作，因为此安全功能会阻止其他服务器访问您的 REST 服务

【讨论】：

好的，成功了吗？如果是，您介意将您的 python 脚本作为您自己问题的单独答案发布并接受它，以便其他人可以看到对您有帮助吗？

使用 python 脚本可以正常工作。奇怪..我如何对 Angular2 导入请求 url = "path" r = requests.post(url, auth=('user', '')) print(r.text)

做同样的事情

python 脚本工作的原因与邮递员和 http 请求者工作的原因相同；我想您的角度应用程序来自与您的休息服务不同的端口？我刚刚测试了您在问题中发布的 angular-post-request 并且它有效；所以（即使我以前没有见过这样的请求方法）你的问题一定是你来自不同的端口，而邮递员和 python-script 没有

如您的问题所述，您的 angular-Server 在端口 4200 上运行；您的 rest-Service 在哪个端口上运行？ 8080？

您需要在托管您的 REST 服务的服务器中进行我在回答中建议的更改，否则它将不接受来自服务器上的使用这些方法（“选项”、“发布”）的请求其他端口 - 这是您遇到的问题，python 脚本只是不在自己的服务器上运行，因此它使用默认端口，我认为您的 REST 服务也可能使用该端口