104

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

失败：（未知 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');
4

8 回答 8

57

根据我的经验，这些插件可以使用 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": "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

于 2017-12-21T22:12:17.727 回答
9

您也可以尝试fetch功能和no-cors模式。有时我发现它比 Angular 的内置 http 模块更容易配置。您可以在 Chrome 开发工具网络选项卡中右键单击请求并以 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'
    }
  )
);
于 2019-06-17T12:54:03.550 回答
7

如果您像我一样使用本地 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
        }
      ));
  }

像往常一样 .subscribe 即可。

于 2020-02-11T19:36:48.937 回答
3

使 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 调用，它适用于我..

  • 请永远不要忘记标题中列出的参数：例如参数：new HttpParams().set('program_id', this.program_id)
于 2018-04-16T02:15:15.290 回答
2

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 请求标头：

接受：*/*
接受编码：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 对我有用！

于 2018-07-25T22:40:08.077 回答
1

请从 angular cors 导入 requestoptions

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

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

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

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

下面的代码片段 -

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

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

于 2018-04-03T17:10:53.903 回答
0

在您的 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

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

于 2021-05-11T07:27:17.860 回答
-8

The following worked for me after hours of trying

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

However following code did not work, I am unclear as to why, hopefully someone can improve this answer.

          $http({   method: 'POST', url: "http://localhost:8080/yourresource", 
                    parameter, 
                    headers: {'Content-Type': 'application/json', 
                              'Access-Control-Allow-Origin': '*',
                              'Access-Control-Allow-Methods': 'POST'} 
                })
于 2019-02-10T19:26:04.237 回答