Question

我正在使用Angular 2开发一个应用程序，当我尝试进行API调用时发现以下错误：

XMLHttpRequest无法加载http://localhost:9090/conf。对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:5555＆＃39;因此不允许访问。

这里有两个我的电话示例：

import { Http, Response } from '@angular/http';

// ...

@Injectable()
export class ConfService {

  // ...

  getConf(): Observable<string[]> {
    return this.http.get(
                      'http:localhost:9090/conf?id=1',
                      {
                        headers: {
                          'Accept': 'application/json;charset=UTF-8'
                        }
                      }
                    )
                    .map((res: Response) => res.json())
                    .catch(this.handleError);
  }

  setConf(conf: any[]): Observable<string[]> {
    return this.http.get(
                      'http:localhost:9090/conf?id=1',
                      conf,
                      {
                        headers: {
                          'Content-Type': 'application/json;charset=UTF-8'
                        }
                      }
                    )
                    .map((res: Response) => res.json())
                    .catch(this.handleError);
  }

}

但是，当我使用cURL时，它有效！

$ curl -XPUT 'localhost:9090/configuration?id=1' \
> -H 'Content-Type: application/json'
> -d '{"conf":1234}'
Success!
$ curl -XGET 'localhost:9090/conf?id=1'
{"conf":1234}

这里发生了什么？

由于

Answer 1

这是因为浏览器安全性，浏览器中的一般CORS问题。您的Web应用程序在localhost：5050上运行，服务器在localhost：9090上运行。浏览器不允许访问具有不同端口号的其他主机。解决方案是在您的服务器中处理CORS（即在您的应用程序中运行localhost：9090）

No＆＃39; Access-Control-Allow-Origin＆＃39; Angular 2上的标题，但cURL工作正常

1 个答案: