如何在 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”标头。 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 文件来充当代理服务器。这仅用于开发目的。

阅读更多关于here的信息。

proxy.conf.json文件：

{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

我将proxy.conf.json 文件放在同一目录中的package.json 文件旁边。

然后我修改了package.json文件中的启动命令：

"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

您也可以尝试fetch功能和no-cors模式。有时我发现它比 Angular 的内置 http 模块更容易配置。你可以在 Chrome Dev tools 网络标签中右键点击请求，并以 fetch 语法复制它们，非常棒。

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'
    }
  )
);

Answer 3

如果您像我一样使用本地 SMS 网关服务器，并且向 IP （如 192.168.0.xx）发出 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
        }
      ));
  }

只需像往常一样订阅即可。

Answer 4

在 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)

Answer 5

Angular 6 中带有 httpClient 的 POST 也在执行 OPTIONS 请求：

标题常规：

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

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

下一个POST请求Header：

接受：*/* 接受编码：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, like Gecko) Chrome/59.0.3071.109 Safari/537.36

注意 Access-Control-Request-Headers:content-type.

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

-“访问控制允许来源”=>'*'， -“访问控制允许方法”=> 'GET，POST，PATCH，DELETE，PUT，OPTIONS'， -"Access-Control-Allow-Headers" => 'Origin, Content-Type, X-Auth-Token, content-type',

通过此设置，GET 和 POST 对我有用！

Answer 6

请从 angular cors 导入 requestoptions

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

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

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

在您的 api 请求中发送请求选项

下面的代码 sn-p-

 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 请求将首先到达。

试试这个，让我知道它是否有效

Answer 7

在您的 API 文件中添加此注释

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, PATCH");

我已经尝试实施这些解决方案，将 Laravel 的 CORS 标头响应添加到我的项目中，但我仍然没有成功：

https://github.com/barryvdh/laravel-cors

https://github.com/spatie/laravel-cors

我希望有人遇到过类似的问题并可以提供帮助。

Answer 8

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

      $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'} 
                })