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

Posted 2023-02-27

【中文标题】如何在 Angular 5 的标头中添加 CORS 请求

【英文标题】：How to add CORS request in header in Angular 5

【发布时间】：2018-04-30 21:55:46

【问题描述】：

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

【问题讨论】：

需要在服务端添加Cors header。

@SachilaRanawaka 是的，我已将它添加到我的索引文件中。

发布该服务器文件

XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header的可能重复

这个答案可能有用：***.com/a/58064366/7059557

【参考方案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

【讨论】：

它仅用于开发目的。您无法使用该代理工具构建您的应用

这里有人可以看看***.com/questions/55429787/…的问题

我们应该在 proxy.config 文件中设置target 什么？

我绑定它显示状态正常，但现在出现新错误。 HttpErrorResponse headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:4200/", ok: false, … error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) message: "Unexpected token < in JSON at position 0" "

这在生产版本中不起作用，所以它不是一个合适的解决方案

【参考方案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'
    
  )
);

【讨论】：

问题中的代码正在尝试读取响应。 no-cors 阻止它。它还阻止将内容类型设置为application/json。

非常具体的情况，对于api.github.com/orgs/nesign/repos，我看到Access to XMLHttpRequest at '..' from origin '..' has been blocked by CORS policy: Request header field x-timezone is not allowed by Access-Control-Allow-Headers in preflight response. 无法覆盖默认添加的Access-Control-Request-Headers: cache-control,x-timezone :( 并且Github 有这个响应Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, Accept-Encoding, X-GitHub-OTP, X-Requested-With, User-Agent fetch 工作

糟糕！ x-timezone 是我添加的 - 我已经过度设计 httpclient 很久以前就有拦截器了 :)

感谢 mode 参数。我有一个向本地计算机发送 api 请求并打印标签的应用程序。 Angular 应用程序位于云端，因此无法使用代理，因为请求必须来自网络内部。

【参考方案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
        
      ));
  

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

【讨论】：

按预期工作，我在将 Web 应用程序的协议从 HTTP 更改为 HTTPS 以检查新 API 是否启动然后重定向时使用它。我们有严格的 CORS/HSTS 政策，因此无法使用普通的 GET。

还要注意 fetch 在 IE11 上不起作用

真的很管用！没有任何代理！

【参考方案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)

【参考方案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 对我有用！

【参考方案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 请求将首先到达。

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

【参考方案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

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

【参考方案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' 
                )

【讨论】：

$http ?是 AngularJS，因为我们在那里谈论 Angular 5。无法使此代码工作

@VictorJozwicki 你说得对，它不是 Angular 5。在我的 package.json 中，它显示 Angular 版本 1.7.5。