How to fix CORS issue http request in Angular 5

Question

I am new in Angular 5, and I want to send http request but it return CORS error in inspect element.

Error

XMLHttpRequest cannot load http://example.com/account/create. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

Below is my code:

postFormData(apiUrl: string, value: Object): Observable<any> {
const body = value;
const headers = new Headers();
const utcOffset = -(new Date().getTimezoneOffset());
headers.append('Content-Type', 'application/json');
headers.append('utc-offset', utcOffset.toString());
headers.append('platform', 'WEB');
headers.append('app-version', '1.00');
headers.append('version', '1.0');
headers.append('accept', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
headers.append('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

if (localStorage.getItem('user')) {
  const user = JSON.parse(localStorage.getItem('user'));
  headers.append('token', user.token);
  headers.append('session', user.session);
}
// const options = new RequestOptions({ headers: headers });
return this.http.post(apiUrl, body, { headers: headers })
  .map(this.extractData)
  .catch(this.handleServerError);
}

Can you provide info about the web server (example.com in your case)? How is it setup? — samsonthehero, Jan 26 '18 at 06:21
What do you get if you run `curl -X OPTIONS http://example.com/account/create -i` (replace with your actual server) — samsonthehero, Jan 26 '18 at 15:02
You adding headers for CORS as a client you can't do this the headers for CORS `Access-Control-*` has to come from your server so you need to fix the server code or get some one else to fix it. — Barkermn01, Apr 28 '19 at 21:54

score 6 · Answer 1 · edited Jul 18 '23 at 14:03

6

CORS is a tool employed by browsers to prevent one origin (localhost in your case) from accessing resources from another (example.com) without the server explicitly saying you can access it via CORS headers like Access-Control-Allow-Origin and others.

It is the server that needs to provide those headers in order for you to access its resources.

Mozilla has a good write up on it here.

edited Jul 18 '23 at 14:03

EJoshuaS - Stand with Ukraine

11,977
56
49
78

answered Jan 26 '18 at 06:14

rsiemens

615
6
15

i tried many things, install CORS extension etc – Sharma Vikram Jan 26 '18 at 07:47
thanks for your answer, there was issue in server, they ware not allow to access-control-allow-origin – Sharma Vikram Jan 29 '18 at 08:31
This answer has a good idea: `CORS` is managed server-side, not client-side. – Gabriel Arghire Jun 22 '22 at 06:40

arul prince · Answer 2 · 2019-02-26T10:12:02.387

1

// Add CORS header.

Example :

const Url = 'http://localhost:3000/';
const headers = new Headers;
const body = JSON.stringify(
{
title: "data" 
});
headers.append('Access-Control-Allow-Origin', '*');
this.http.post(Url, body, { headers: headers })
.pipe(map(res => res))
.catch(err => err);

// you can also use HTTP headers

import { HttpHeaders } from '@angular/common/http';

let header = new HttpHeaders();
header.set('Access-Control-Allow-Origin', '*');

edited Feb 26 '19 at 10:12

answered Feb 26 '19 at 10:06

arul prince

303
1
7

1

doesn't work... – Jim Nov 02 '21 at 15:58

score 1 · Answer 3 · answered Apr 28 '19 at 21:16

1

Are you sure you have got http:// part in your apiUrl varialble send as an argument of postFormData function. That http:// part looks very essential while using HttpClient functions.

answered Apr 28 '19 at 21:16

Bivek Chalise

88
5

score 0 · Answer 4 · edited Apr 28 '19 at 22:57

0

CORS can only be managed server-side using the Access-Control-Allow-Origin header.

In your case, when serving Angular client side at localhost:4200, you have 2 options for the value of this header:

Add * -- this will enable all origins (not recommended in production environment)
Add localhost:4200 (including the port!) -- that will explicit grant only the domain+port to your server

edited Apr 28 '19 at 22:57

grooveplex

2,492
4
28
30

answered Apr 28 '19 at 21:32

Leroy

1
1

How to fix CORS issue http request in Angular 5

4 Answers4

Linked