CODEWITHSUNDEEP
javascriptreactjs
Arnaud P
Arnaud P

Reputation: 117

Problem with fetching from external source

I want to fetch data in order to tokenize my Credit Card but i have to go with this adress :

this.state.data.CardRegistrationURL == "https://homologation-webpayment.payline.com/webpayment/getToken"

This is my fetch :

 postInfoCard = () => {
    const headers = new Headers({
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json",
    });
    const data = {
      accessKeyRef: this.state.data.AccessKey,
      data: this.state.data.PreregistrationData,
      cardNumber: this.state.cardNumber,
      cardExpirationDate: this.state.cardExpirationDate,
      cardCvx: this.state.cardCvx,
    };
    const options = {
      method: "POST",
      headers: headers,
      body: JSON.stringify(data),
    };

    fetch(this.state.data.CardRegistrationURL, options)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
       console.log(data)
      });
  };

but i have several error who are saying " Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource."

"Blocking of a cross-origin request: the “Same Origin” policy does not allow consulting the remote resource located at https://homologation-webpayment.payline.com/webpayment/getToken. Reason: The CORS "Access-Control-Allow-Origin" header is missing"

"Blocking of a Cross-Origin Request: the "Same Origin" policy does not allow viewing of the remote resource located at https://homologation-webpayment.payline.com/webpayment/getToken. Reason: CORS request failed."

Thx for you'r help see you down bellow in comment !

Upvotes: 0

Views: 1045

Answers (1)

Jalaj
Jalaj

Reputation: 463

There's nothing you can actually do about it. This is because the cors headers [Access-Control-Allow-Origin] are required to be present in the response. So the server needs to attach those headers not your code. You can't just give yourself the permission to access a server. It's the server that decides whether to allow your origin or not.

According to this section on MDN:

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that let servers describe which origins are permitted to read that information from a web browser.

Note how it mentions "... headers that let servers describe which origins are permitted ..."

The best you can do is to proxy the URL through your own server. Create an endpoint on your own server that proxies your data to the other cross-origin server and returns the response to your frontend as-is.

Upvotes: 2

Related Questions