如何在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', []))
    );
}

错误：

对preflight请求的响应未通过访问控制检查：请求的资源上没有“access-control-allow-origin”标头。因此，不允许访问源“http：//localhost:4200”

失败：（未知url）的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
  }
}

"start": "ng serve --proxy-config proxy.conf.json"

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

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