How to Enable Access-Control-Allow-Origin for Angular 5/Nodejs?
Read Many Ways for Including of 'Access-Control-Allow-Origin' and None Worked for Me. I Use @Angular/Common/Http Module and External Url as Data Source. by the...
Read many ways for including of 'Access-Control-Allow-Origin' and none worked for me.
I use @angular/common/http module and external url as data source. by the attempt to get data instead, get error: /////.................
Failed to load No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' is therefore not allowed access. The response had HTTP status code 503.
account.service.ts:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient, HttpParams } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Account } from '../models/account';
const baseUrl : string = '
const httpOptions : any = {
headers: new HttpHeaders({
//'Content-Type': 'application/json',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Origin': '*'
})
};
@Injectable()
export class AccountService {
private isUserLoggedIn;
private usreName;
private account : Account;
constructor(
private http: HttpClient,
private router: Router
) {}
logIn (credentials: any): Observable<Account> {
return this.http.get<Account>(baseUrl + 'accounts');
}
}app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { routing } from './routing';
import { AppComponent } from './app.component';
import { AppGlobal } from './app.global';
import { AccountComponent } from './components/account/account.component';
@NgModule({
declarations : [
AppComponent,
AccountComponent,
....
],
imports : [
routing,
BrowserModule,
HttpClientModule,
CookieModule.forRoot()
],
providers : [AccountService, AppGlobal],
bootstrap : [AppComponent]
})
export class AppModule { }Help please
////////////////Tried fix 1
//......
import { HttpHeaders} from '@angular/common/http';
//.......
logIn (credentials: any): Observable<Account> {
const headers = new HttpHeaders()
.append('Content-Type', 'application/json')
.append('Access-Control-Allow-Headers', 'Content-Type')
.append('Access-Control-Allow-Methods', 'GET')
.append('Access-Control-Allow-Origin', '*');
return this.http.get<Account>(baseUrl + 'accounts', {headers});
}I am still getting that error :
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access. The response had HTTP status code 503.
////////////////Tried fix 2
proxy.conf.json:
{
"/api": {
"target": "",
"secure": false,
"pathRewrite": {
"^/api": ""
},
"changeOrigin": true,
"logLevel": "debug"
}
}ng serve --proxy-config proxy.conf.json
also error
4 Answers
**Set headers to allow CORS origin in Express **
=> Add code in the server.js file or mail file.
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
CORS (Cross-Origin Resource Sharing) is an HTML5 feature that allows one site to access another site’s resources despite being under different domain names.
The W3C specification for CORS actually does a pretty good job of providing some simple examples of the response headers, such as the key header, Access-Control-Allow-Origin, and other headers that you must use to enable CORS on your web server.
If you are using .NET Api then add this to your WebApiConfig.cs file
public static void Register(HttpConfiguration config)
{
var enableCorsAttribute = new EnableCorsAttribute("*",
"Origin, Content-Type, Accept",
"GET, PUT, POST, DELETE, OPTIONS");
config.EnableCors(enableCorsAttribute);
// Web API configuration and services
// Configure Web API to use only bearer token authentication.
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/v1/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
You mentioned webpack-dev-server, which of course can handle CORS since it's using express behind the scenes. In your webpack config
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}
},
Access-Control-Allow-Origin
Is response header not request header. You must add this header to your resfull (server)
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
