React.js 上获取 api 的问题

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...

Thank You

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

Answer 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.

Answer 2

The backend server need to allow indicate any other origins.

eg Express server in main.js

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