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

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

angular

如何在Angular 5的标头中添加CORS请求,angular,angular5,Angular,Angular5,我已经在标题中添加了CORS，但我仍然在请求中获得CORS问题。在头文件中添加和处理COR和其他请求的正确方法是什么以下是服务文件代码： import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http'; const httpOptions = { headers: new HttpHeaders({ 'Access-Control-Allow-Origin':'*', 'Au

我已经在标题中添加了CORS，但我仍然在请求中获得CORS问题。在头文件中添加和处理COR和其他请求的正确方法是什么

以下是服务文件代码：

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

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

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

请从angular cors导入请求选项

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

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

请从angular CORS导入请求选项

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

试试这个，让我知道它是否有效。我遇到了一个相同的问题，我从angular5添加了CORS，但它不起作用，然后我将CORS添加到后端，它对我起作用了

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）

使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的一篇帖子也在做一个选项请求：

标题概述：

Request URL:https://hp-probook/perl-bin/muziek.pl/=/postData Request Method:OPTIONS Status Code:200 OK Remote Address:127.0.0.1:443 Referrer Policy:no-referrer-when-downgrade 请求URL:https://hp-probook/perl-bin/muziek.pl/=/postData 请求方法：选项状态代码：200 OK 远程地址：127.0.0.1:443 推荐人策略：降级时无推荐人我的PerlREST服务器实现选项请求，返回代码为200

下一个POST请求标头：

Accept:*/* Accept-Encoding:gzip, deflate, br Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4 Access-Control-Request-Headers:content-type Access-Control-Request-Method:POST Connection:keep-alive Host:hp-probook Origin:http://localhost:4200 Referer:http://localhost:4200/ User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Safari/537.36 接受：*/* 接受编码：gzip，deflate，br 接受语言：nl nl，nl；q=0.8，在美国；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 注意访问控制请求头：内容类型

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

-"Access-Control-Allow-Origin" => '*', -"Access-Control-Allow-Methods" => 'GET,POST,PATCH,DELETE,PUT,OPTIONS', -"Access-Control-Allow-Headers" => 'Origin, Content-Type, X-Auth-Token, content-type', -“访问控制允许源”=>“*”， -“访问控制允许方法”=>“获取、发布、修补、删除、放置、选项”， -“访问控制允许标头”=>“来源、内容类型、X-Auth-Token、内容类型”，

有了这个设置，GET和POST为我工作了

在Angular 6中，httpClient的一篇帖子也在做一个选项请求：

标题概述：

下一个POST请求标头：

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

有了这个设置，GET和POST为我工作了

经过几个小时的努力，下面的内容对我很有用

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

您还可以尝试

fetch

功能和

no cors

模式。有时我发现配置它比Angular的内置http模块更容易。您可以在Chrome开发工具netwo中的请求上单击鼠标右键