Angular 2 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header
Solution 1
That's a CORS issue. It happens because you are trying to request a resource from a different host. Your API needs to answer those OPTIONS requests properly otherwise the browser is going to block the request.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
CORS protection isn't implemented in postman so your request works fine there.
Edit: You can also use webpack / angular cli's proxy support if your backend is going to run on the same host in production: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md
Solution 2
Guys thank you for your help. I solved It. As you said error occured because I didn't Implement CORS in my web API. this article was helped me :ASP.NET Core and CORS Gotchas
isanka thalagala
Full-stack senior software engineer who is having more than 5+ years of industry experience in designing, developing and deploying applications with C#.net,Asp.net MVC,Angular JS,Bootstrap, Windows services,Web services,WCF services,Web APIs technologies by following Agile methodologies. I strongly believe that in this dynamic business environment I always perform my very best and contribute my fullest potential to achieve the targets, under any circumstances. Love to learn while growing in the corporate ladder and be a valuable asset to the organization. I'm totally dedicated person with team player skills and I don't care who gets credit but I need to win and when I look back I need proud legend behind me. Specialties: Asp.net MVC,AngularJS,bootstrap , Javascript, Object-Oriented Programming, Web services, MySQL,MS SQL, HTML, CSS, XML, JSON, JQuery, SVN,TFS, JQuery, HTML5, CSS, XML,Windows phone If you are seeking a person who takes up a challenge with no hesitation, is capable of meeting deadlines and who is career-committed as it takes to achieve total success an experienced team player with excellent communication and interpersonal skills who has the ability to work independently under pressure, can lead, motivate, influence others, can train and mentor subordinates.
Updated on June 17, 2022Comments
-
isanka thalagala almost 2 years
I'm new to Angular2. And I'm trying to call POST method to my .net core API.It's working fine with Postman.But when I call it from my angular 2 service it gives an error.
This is my api.service.ts
import { Injectable } from '@angular/core'; import { environment } from '../../../environments/environment'; import { Headers, Http, Response, URLSearchParams } from '@angular/http'; import { Observable } from 'rxjs/Rx'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import { JwtService } from './jwt.service'; @Injectable() export class ApiService { constructor( private http: Http, private jwtService: JwtService ) {} private setHeaders(): Headers { const headersConfig = { 'Content-Type': 'application/json', 'Accept': 'application/json', 'Access-Control-Allow-Origin': '*' }; if (this.jwtService.getToken()) { headersConfig['Authorization'] = `Token ${this.jwtService.getToken()}`; } return new Headers(headersConfig); } post(path: string, body: Object = {}): Observable<any> { return this.http.post( `${environment.api_url}${path}`, JSON.stringify(body), { headers: this.setHeaders() } ) .catch(this.formatErrors) .map((res: Response) => res.json()); }
-
Stack over 6 yearsLook at server-side CORS implementation. developer.mozilla.org/en-US/docs/Web/HTTP/CORS
-
-
Stack over 6 yearshigh five - same link, same time