angularjs - 选项而不是 Post : Response to preflight request doesn't pass access control check.

Question

我正在尝试访问一个 rest api 源，它正在与 postman 或 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')
        );


     }

作为错误，我总是得到:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

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

Answer 1

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

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

这可能取决于托管 REST-API 的服务器；如果您使用的是 Apache 服务器，则可以将其添加到您的 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 服务的服务器中设置 header ；它不能在其他地方工作，因为此安全功能会阻止其他服务器访问您的 REST 服务