CODEWITHSUNDEEP
javascriptreactjsfetch-api
Masoud Tesna
Masoud Tesna

Reputation: 67

Problems with the fetch API on React.js

When using a different domain to use API and fetch data, I receive the following Error:

"Access-Control-Allow-Origin"

error_1

enter image description here

error_2

enter image description here

I need your guidance regarding this problem...

My code:

const url = "https://hornb2b.com/api/products?items_per_page=4&company_id=181";

let headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Credentials', 'true');
headers.append('authority', 'hornb2b.com');
headers.append("Authorization", `Basic ${auth}`);
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9');

fetch(url, {
  method:'GET',
  headers: headers
})
.then(response => response.json())
.then(
  (json) => {
    /*console.log(json);*/
    this.setState({
      isLoaded: true,
      products: json.products
    });
  },
  // Note: it's important to handle errors here
  // instead of a catch() block so that we don't swallow
  // exceptions from actual bugs in components.
  (error) => {
    this.setState({
      isLoaded: true,
      error
    });
  }
)

Upvotes: 0

Views: 326

Answers (2)

Kenneth Leung
Kenneth Leung

Reputation: 16

The backend server need to allow indicate any other origins.

e.g. Express server in main.js

import express from "express"
import cors from "cors"
const app = express();
app.use(cors());

Upvotes: 0

Johny Xu
Johny Xu

Reputation: 11

I think you'd better examine the Access-Control-Allow-Origin in the back end, not from the front end, the server can modify this option and permit you to fetch api.

Upvotes: 1

Related Questions