CODEWITHSUNDEEP
reactjscors
user8537567
user8537567

Reputation:

CORS 'Access-Control-Allow-Origin' header not present issue

I'm writing the client-side of an app with ReactJS, I'm stuck at getting data from a certain api. I get "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access" error. As I suppose the server is missing the "Access-Control-Allow-Origin" headers in order to enable CORS but what I don't understand is why when I'm trying to make an AJAX call with "Restlet Client - REST API testing" browser extension it actually works. I get a following success response. But It doesn't work inside my actual React Request. Is there a way I can to get rid of this error without any changes on the server side? Why does this extension actually work?

Connection: keep-alive
Content-Type:   application/json; charset=UTF-8;
Date:   
2017 Sep 22 22:45:40-1m 50s
Server: ..../1.6.2
Transfer-Encoding:  chunked
Accept: */*
Accept-Encoding:    gzip, deflate, br
Accept-Language:    ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

My React code but nothing special in there, just testing if I'm getting a response 

componentWillMount() {
    const url = "https://myserver.ru/api/issue?perPage=10";
    Request.get(url).then((response) => {
      this.setState({
      issues: response
     });
    });   
  }

Upvotes: 2

Views: 2391

Answers (1)

Kannaiyan
Kannaiyan

Reputation: 13055

If you are making a cross-site requests then browser will expect Access-Control-Allow-Origin headers from the server. The value of that header can be,

Access-Control-Allow-Origin: *

or 

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

When you are requesting from localhost, make sure it also need to add port number as well.

More about CORS documentation:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Hope it helps.

Upvotes: 1

Related Questions