如何在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 文件：

{

  "/posts": {

    "target": "https://example.com",

    "secure": true,

    "pathRewrite": {

    "^/posts": ""

  },

    "changeOrigin": true

  }

}

我将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) => {

  console.log(returnedStuff);

});

最后，要运行我的应用，我必须使用npm start或ng serve --proxy-config proxy.conf.json

Answer 2

使NG5中HttpClient的标头看起来像这样：

let httpOptions = {

      headers: new HttpHeaders({

        'Content-Type': 'application/json',

        'apikey': this.apikey,

        'appkey': this.appkey,

      }),

      params: new HttpParams().set('program_id', this.program_id)

    };

您将可以使用您的本地主机url进行api调用，它对我有用..

请永远不要忘记标题中列出的参数：例如params：new HttpParams（）。set（'program_id'，this.program_id）