Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote ...............CORS header ‘Access-Control-Allow-Origin’ missing [duplicate]

i have data in http://localhost:3000/edata

[{"_id":"598705ac8f79380367e0a7f2","name":"prasad","age":"28","gender":"male","phone":8790440944},{"_id":"598733508f79380367e0a7f8","name":"ravi","age":"27","gender":"male","phone":"9912881777"}

i want this data to be get when i run my client application i.e http://localhost:4200

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import {HttpModule} from "@angular/http";
 import { AppComponent } from './app.component';
 import {TasksComponent} from "../tasks/tasks.component";
 import {TaskServices} from "./services/task.services";

 @NgModule({
declarations: [AppComponent, TasksComponent],
imports: [BrowserModule,HttpModule],
providers: [TaskServices],
bootstrap: [AppComponent,TasksComponent]
})
 export class AppModule { }

tasks.component.ts

 import {Component, enableProdMode} from '@angular/core';
 import {TaskServices} from "../app/services/task.services";
 enableProdMode();
 @Component({
 selector: 'tasks',
 templateUrl: './tasks.component.html',
 styleUrls: ['./tasks.component.css']
 })
 export class TasksComponent {
 constructor(private taskServices:TaskServices){
 this.taskServices.getTasks()
       .subscribe(tasks =>{
        console.log(tasks);
      });
  }
  title = 'app';
 }

task.services.ts

 import {Injectable} from '@angular/core';
 import {Http, Headers} from "@angular/http";
  import 'rxjs/add/operator/map';

 @Injectable()
 export class TaskServices{
  constructor(private http:Http){
 console.log('Task service initialized....');
  }
    getTasks(){
   return this.http.get('http://localhost:3000/edata')
    .map(res => res.json());
  }

when i run application ,in the console i am getting the error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/edata. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

how to Fix the error.and how to get data from the other host...plz help me.

like image 733
durgaprasad kalapati Avatar asked Aug 10 '17 10:08

durgaprasad kalapati


People also ask

How do you fix cross-origin request blocked the same-origin policy disallows reading the remote resource at?

“Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.example.com/resource. This can be fixed by moving the resource to the same domain or enabling CORS.”

How do I fix cross-origin request blocked?

Open a network tab in your console. In the response header look for the Access-Control-Allow-Origin header. If it does not exist then add it as a middleware in the way we discussed above. If it does exist then make sure there is no URL mismatch with the website.

How do I fix blocked by CORS policy Chrome?

Simply activate the add-on and perform the request. CORS or Cross-Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs). Installing this add-on will allow you to unblock this feature.

How do I fix CORS policy no Access-Control allow origin?

If the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the Access-Control-Allow-Origin header's value. You can also configure a site to allow any site to access it by using the * wildcard. You should only use this for public APIs.


1 Answers

If using Node-server add this in your server.js

app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});

and Add Hearders in your http method

return this.http.get(
  'http://localhost:3000/edata',{
    headers: {'Content-Type', undefined} /** Use Content-type as your requirement undifined OR application/json**/
  }).map(res => res.json())
like image 159
Nasiruddin Saiyed Avatar answered Oct 29 '22 09:10

Nasiruddin Saiyed