我正在尝试做一个http.post,但chrome显示以下错误：
No Access-Control-Allow-Origin.
我的Angular功能是：
onSubmit(event: Event) {
event.preventDefault();
this.leerDatos()
.subscribe(res => {
//datos = res.json();
console.log("Data send");
},error => {
console.log(error.json());
});
}
leerDatos(): Observable<any> {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(`http://localhost:8080/LegoRepositoryVincle/CoreServlet`,{ name: "bob" },options)
//.map(this.extractData)
//.catch(this.handleError);
}
response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
response.addHeader("Access-Control-Allow-Origin","http://localhost:4200");
response.addHeader("Access-Control-Allow-Credentials","true");
response.addHeader("Access-Control-Allow-Methods","GET,POST");
response.addHeader("Access-Control-Allow-Headers","X-PINGOTHER,Origin,X-Requested-With,Content-Type,Accept,Cache-Control,Pragma");
解决方法
如果你仍然想在开发过程中使用CORS,你可以使用
angular/cli –proxy-config来解决这类问题.
基本上,如果您要向远程计算机发出请求,例如,运行nginx Web服务器,则可以对同一个应用程序执行所有调用,例如： localhost：4200(默认为angular / cli).然后使用–proxy-config将这些响应重定向到您的服务器.
假设您的服务器的api具有所有/ api前缀入口点.您需要在项目的根目录中创建名为proxy.config.json的文件,并将其配置为：
{
"/api" : {
"target" : "http://xx.xxx.xxx.xx",// Your remote address
"secure" : false,"logLevel" : "debug",// Making Debug Logs in console
"changeOrigin": true
}
}
然后,所有的http请求都将指向localhost：4200 / api /.
最后,您应该通过运行ng server –proxy-config proxy.config.json来完成.
如果您发现请求中缺少某些标头,请从您的Web服务器添加它们或编辑您的http.service.ts以附加如下示例：
import { Injectable } from '@angular/core';
import { Http,Headers,RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { isNull } from 'lodash';
@Injectable()
export class HttpClientService {
private _host: string;
private _authToken: string;
private _options: RequestOptions = null;
constructor(private _http: Http,private _config: AppConfig,private _localStorageService: LocalStorageService) {
this._host = ''; // Your Host here,get it from a configuration file
this._authToken = ''; // Your token here,get it from API
}
/**
* @returns {RequestOptions}
*/
createAuthorizationHeader(): RequestOptions {
// Just checking is this._options is null using lodash
if (isNull(this._options)) {
const headers = new Headers();
headers.append('Content-Type','application/json; charset=utf-8');
headers.append('Authorization',this._authToken);
this._options = new RequestOptions({headers: headers});
}
return this._options;
}
/**
* @param url {string}
* @param data {Object}
* @return {Observable<any>}
*/
get(url?: string,data?: Object): Observable<any> {
const options = this.createAuthorizationHeader();
return this._http.get(this._host + url,options);
}
/**
* @param url {string}
* @param data {Object}
* @return {Observable<any>}
*/
post(url?: string,data?: Object): Observable<any> {
const body = JSON.stringify(data);
const options = this.createAuthorizationHeader();
return this._http.post(this._host + url,body,options);
}
}
因此,您可以通过此服务执行所有api调用
import { Component,OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClientService } from './http.service.ts';
export class TestComponent implements OnInit {
_observable: Observable<any> = null;
constructor(private _http: HttpClientService) { }
ngOnInit() {
this._observable = this _http.get('test/')
.map((response: Response) => console.log(response.json()));
}
}
Angular 5更新：
在app.module.ts中,您现在需要从’@ angular / http’替换import {HttpModule};使用’@ angular / common / http’中的import {HttpClientModule};
该服务有点变化：
import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { isNull,isUndefined } from 'lodash';
@Injectable()
export class HttpClientService {
private _host: string;
private _authToken: string;
private __headers: HttpHeaders;
constructor(private _http: HttpClient,get it from API
}
/**
* @returns {HttpHeaders}
*/
createAuthorizationHeader(): HttpHeaders {
// Just checking is this._options is null using lodash
if (isNull(this.__headers)) {
const headers = new HttpHeaders()
.set('Content-Type','application/json; charset=utf-8')
.set('Authorization',this. _authToken || '');
this.__headers= new RequestOptions({headers: headers});
}
return this.__headers;
}
/**
* @param url {string}
* @param data {Object}
* @return {Observable<any>}
*/
get(url?: string,{
headers : this.createAuthorizationHeader()
});
}
/**
* @param url {string}
* @param data {Object}
* @return {Observable<any>}
*/
post(url?: string,{
headers : this.createAuthorizationHeader()
});
}
}
