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

我已经在标题中添加了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');

以我的经验，这些插件适用于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

您也可以尝试fetch功能和no-cors模式。有时候，我发现它比Angular的内置http模块更容易配置。您可以在“ Chrome开发者工具”的“网络”标签中右键单击请求，然后使用提取语法将其复制，这很棒。

import { from } from 'rxjs';

// ...

result = from( // wrap the fetch in a from if you need an rxjs Observable
  fetch(
    this.baseurl,
    {
      body: JSON.stringify(data)
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
      mode: 'no-cors'
    }
  )
);

如果您和我一样，并且使用的是本地SMS网关服务器，并且向192.168.0.xx之类的IP发出GET请求，则可以确定会出现CORS错误。

不幸的是，我找不到Angular解决方案，但是在先前的重播帮助下，我找到了解决方案，并发布了Angular 7 8 9的更新版本。

import {from} from 'rxjs';

getData(): Observable<any> {
    return from(
      fetch(
        'http://xxxxx', // the url you are trying to access
        {
          headers: {
            'Content-Type': 'application/json',
          },
          method: 'GET', // GET, POST, PUT, DELETE
          mode: 'no-cors' // the most important option
        }
      ));
  }

像平常一样订阅。

使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）

在Angular 6中使用httpClient进行的POST也正在执行OPTIONS请求：

总标题：

要求网址：https：//hp-probook/perl-bin/muziek.pl/=/postData
请求方法：OPTIONS
状态码：200 OK
远程地址：127.0.0.1：443
推荐人政策：降级时无推荐人

我的Perl REST服务器实现带有返回码200的OPTIONS请求。

下一个POST请求标头：

接受：*/*
接受编码：gzip，deflate，br
接受语言：nl-NL，nl; q = 0.8，en-US; q = 0.6，en; q = 0.4
访问控制请求标头：内容类型
访问控制请求方法：POST
连接方式：保持活跃
主持人：hp-probook
来源：http：// localhost：4200
引荐来源：http：// localhost：4200 /
用户代理：Mozilla / 5.0（X11; Linux x86_64）AppleWebKit / 537.36（KHTML，例如Gecko）Chrome / 59.0.3071.109 Safari / 537.36

注意Access-Control-Request-Headers：content-type。

因此，我的后端perl脚本使用以下标头：

 -“访问控制允许来源” =>'*'，
 -“ Access-Control-Allow-Methods” =>'GET，POST，PATCH，DELETE，PUT，OPTIONS'，
 -“ Access-Control-Allow-Headers” =>'来源，内容类型，X-Auth-令牌，内容类型'，

通过此设置，GET和POST为我工作了！

请从角度cors导入requestoptions

    import {RequestOptions, Request, Headers } from '@angular/http';

并在您的代码中添加请求选项，如下所示

    let requestOptions = new RequestOptions({ headers:null, withCredentials: 
    true });

您的api请求中的send request选项

下面的代码段

     let requestOptions = new RequestOptions({ headers:null, 
     withCredentials: true });
     return this.http.get(this.config.baseUrl + 
     this.config.getDropDownListForProject, requestOptions)
     .map(res => 
     {
      if(res != null)
      { 
        return res.json();
        //return true;
      }
    })
  .catch(this.handleError);
   }  

并在您的后端PHP代码中添加CORS，所有api请求将首先登陆。

试试这个，让我知道它是否正常工作，我有一个相同的问题，我从angular5添加了CORS，但没有工作，然后我将CORS添加到了后端，它对我有用

经过数小时的尝试，以下内容对我有用

      $http.post("http://localhost:8080/yourresource", parameter, {headers: 
      {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }).

但是下面的代码不起作用，我不清楚原因，希望有人可以改善这个答案。

          $http({   method: 'POST', url: "http://localhost:8080/yourresource", 
                    parameter, 
                    headers: {'Content-Type': 'application/json', 
                              'Access-Control-Allow-Origin': '*',
                              'Access-Control-Allow-Methods': 'POST'} 
                })