why i am getting 'Access-Control-Allow-Origin' error

Question

I am creating small application to get html content from website url using angular cli. i have added imported all required file but i am getting this error:

XMLHttpRequest cannot load https://www.test.org/publicclass/index.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

how we can solve this issue.

script:

 import { Component, OnInit } from '@angular/core'; 
 import { HttpClient } from '@angular/common/http';  
 import * as jQuery from 'jquery';   
 import { Http, Headers, RequestOptions } from '@angular/http'; 

 @Component({
  selector: 'app-bodycontent',
  templateUrl: './bodycontent.component.html',
  styleUrls: ['./bodycontent.component.css']
 })  
 export class BodycontentComponent implements OnInit { 
 title = 'app';
 results = '';
 constructor(private http: HttpClient){
 }
 ngOnInit(): void {

 let headers = new Headers({ 'Content-Type': 'text/html' });
 let options = new RequestOptions({ headers: headers });
 this.http.get('https://www.test.org/publictest/index.html').subscribe(html => {
  alert(html);
 });
 } 
}

possible duplicate of https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work and https://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin — Davide Alberani, Oct 26 '17 at 10:01
Possible duplicate of [How does Access-Control-Allow-Origin header work?](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) — Davide Alberani, Oct 26 '17 at 10:01

awd · Answer 1 · 2017-10-26T10:13:25.607

2

The server at https://www.test.org/publicclass/index.html needs to supply a header that tells browser that your site is allowed to request data from them. it should send a header something like the following with response-

Access-Control-Allow-Origin: http://localhost:8080

then you would be able to use resource from that url into your page.

alternately, if its only for your local environment there are browser extension available (for almost all major browsers) that help bypass this restriction. you can use them.

edited Oct 26 '17 at 10:13

answered Oct 26 '17 at 09:54

awd

2,302
1
22
29

Thanks for your answer. i am new in angular cli so can you tell me exactly what i want to do. – saranchel n Oct 26 '17 at 09:59
this is not specific to angular, I would suggest you go through the documentation here - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS – awd Oct 26 '17 at 10:02
finaly you are telling i want to run this script in firefox rite because that browser only support? – saranchel n Oct 26 '17 at 10:08
which script? the target server needs to set that header. – awd Oct 26 '17 at 10:11
That documentation is applicable to HTTP web standards in general, not only firefox – awd Oct 26 '17 at 10:11
ya..i am not getting error: 'Access-Control-Allow-Origin' in firefox but html content is not coming in alert. can you edit my code? – saranchel n Oct 26 '17 at 10:13

score 1 · Accepted Answer · answered Oct 26 '17 at 11:25

For web security purpose, all the browsers follow SOP (Same Origin Policy)

You can know more about SOP here

So if you are fetching web service response for your application not abiding these SOP rules, you see these errors in your console.

To Overcome that, you can use CORS plugin for chrome. That will solve you problem.

why i am getting 'Access-Control-Allow-Origin' error

2 Answers2