如何在Angular 5的标头中添加CORS请求

Question

我已经在标题中添加了CORS，但是我的请求中仍然出现CORS问题。在标头中添加和处理CORS和其他请求的正确方法是什么？

这是服务文件代码：

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';

const httpOptions = {

  headers: new HttpHeaders({ 

    'Access-Control-Allow-Origin':'*',

    'Authorization':'authkey',

    'userid':'1'

  })

};

public baseurl = 'http://localhost/XXXXXX';

userAPI(data): Observable<any> {

  return this.http.post(this.baseurl, data, httpOptions)

    .pipe(

      tap((result) => console.log('result-->',result)),

      catchError(this.handleError('error', []))

    );

}

错误：

对预检请求的响应未通过访问控制检查：请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此，不允许访问源“ http：// localhost：4200 ”

失败：（未知网址）的Http错误响应：0未知错误

在服务器端代码中，我已在索引文件中添加了CORS。

header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');

header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

Answer 1

以我的经验，这些插件适用于HTTP，但不适用于最新的httpClient。另外，在服务器上配置CORS响应标头并不是真正的选择。因此，我创建了一个proxy.conf.json文件来充当代理服务器。在此处阅读有关此内容的更多信息。proxy.conf.json 文件：{&nbsp; "/posts": {&nbsp; &nbsp; "target": "https://example.com",&nbsp; &nbsp; "secure": true,&nbsp; &nbsp; "pathRewrite": {&nbsp; &nbsp; "^/posts": ""&nbsp; },&nbsp; &nbsp; "changeOrigin": true&nbsp; }}我将proxy.conf.json文件放置package.json在同一目录中的文件旁边。然后，我在package.json文件中修改了start命令："start": "ng serve --proxy-config proxy.conf.json"来自我的应用程序组件的HTTP调用：return this._http.get('/posts/pictures?method=GetPictures').subscribe((returnedStuff) => {&nbsp; console.log(returnedStuff);});最后，要运行我的应用，我必须使用npm start或ng serve --proxy-config proxy.conf.json

Answer 2

使NG5中HttpClient的标头看起来像这样：let httpOptions = {&nbsp; &nbsp; &nbsp; headers: new HttpHeaders({&nbsp; &nbsp; &nbsp; &nbsp; 'Content-Type': 'application/json',&nbsp; &nbsp; &nbsp; &nbsp; 'apikey': this.apikey,&nbsp; &nbsp; &nbsp; &nbsp; 'appkey': this.appkey,&nbsp; &nbsp; &nbsp; }),&nbsp; &nbsp; &nbsp; params: new HttpParams().set('program_id', this.program_id)&nbsp; &nbsp; };您将可以使用您的本地主机url进行api调用，它对我有用..请永远不要忘记标题中列出的参数：例如params：new HttpParams（）。set（'program_id'，this.program_id）