Problems with the fetch API on React.js

Question

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

"Access-Control-Allow-Origin"

error_1

error_2

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
    });
  }
)

This is a server side issue. You need to allow cross domain requests. Do you control the server? — spirift
– spirift, Commented Feb 8, 2021 at 10:40

Johny Xu · Accepted Answer · 2021-02-08 10:39:59Z

1

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.

answered Feb 8, 2021 at 10:39

Johny Xu

211 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Kenneth Leung · Accepted Answer · 2021-02-08 10:47:41Z

0

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());

answered Feb 8, 2021 at 10:47

Kenneth Leung

161 bronze badge

Collectives™ on Stack Overflow

Problems with the fetch API on React.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related