-3

I am getting below error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://safe-pay.co/safepay/public/api/user. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I have given below is my code. Any body help me to get resolve this issue. 

import { Injectable } from "@angular/core";
import { Http, Response     ,Headers } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class UserService {

userUrl = "http://safe-pay.co/safepay/public/api/user";

constructor(public http: Http) {        
}

getCategories() {
    let jsonData = {"Data":{
        "action": "CATEGORIES",
        "lang": "AR"
        },
       "Request": {

        }
    } 


    var headers = new Headers();
    headers.append('Content-Type', 'application/json');

    return this.http.post(this.userUrl,jsonData,{  
    headers: headers }).map(res => res.json()).subscribe(data => {
       console.log("data: ",data");
    },
    (err)=> console.log("error: ",err);
    );
}
Vega
  • 27,856
  • 27
  • 95
  • 103
Al-shimaa
  • 23
  • 5
  • it looks like a CORS problem .. so you have to eanble CORS on your BACK END – federico scamuzzi Jul 14 '17 at 13:18
  • You can not request this resource using client-side JavaScript, because the remote party would have to explicitly allow this - and apparently they didn’t. – CBroe Jul 14 '17 at 13:18

1 Answers1

0

It has nothing to do with your code. Your browser is blocking it for security reasons.

If you're using chrome, just install this extension for testing your app => https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

Gowtham
  • 3,198
  • 2
  • 19
  • 30