Fetch api fail CORS

Question

I need some help with fetching data, it said blocked by CORS policy, I've tried to install chrome extension that allowed CORS, but it was still error, I've tried by POSTMAN, the API respond correctly, I've tried using axios, it was still error, I've tried change "Access-Control-Allow-Origin": "*" to "Access-Control-Allow-Origin": "http://localhost:3000", it was still error, i think my problem is in "Access-Control-Allow-Origin": "*", I really appreciate your help.. thank you..

fetch("https://api.rajaongkir.com/starter/province", {
  method: "GET",
  headers: {
    key: myKey,
    "Access-Control-Allow-Origin": "*"
  }
}).then(res => {
  console.log(res);
});

here the response capture

`Access-Control-Allow-Origin` is a ***response*** header. You don't get to tell a site to allow you to access its content. — zero298, Dec 16 '19 at 19:08

score 0 · Answer 1 · answered Dec 16 '19 at 19:14

0

The issue is not your frontend app (React.js) but your backend (served from https://api.rajaongkir.com/).
You need to configure your backend to allow CORS(Cross Origin Resource Sharing)

Whenever you try to call an endpoint from your React app, the browser makes a so called preflight request, which means that it asks the backend if they are allowed to call the endpoint from the current origin, which is in your case localhost:3000.

If you have control over this Backend API, you must allow it to respond from different sources, in this case, localhost:3000. If you have an express.js backend for instance, you can configure it following the docs here.

answered Dec 16 '19 at 19:14

Bruno Paulino

5,304
1
39
39

I'm confused, with your backend API. I only have access to setting IP referer in Backend control Panel, and reset the API key. – Moh Jonaidy Dec 17 '19 at 12:55
@MohJonaidy If you can't change those settings from from your backend, you won't be able to call it from a browser. Mobile apps and server-to-server calls would still work because they don't do preflight requests. – Bruno Paulino Dec 18 '19 at 15:51

score -2 · Answer 2 · answered Dec 16 '19 at 19:14

Cors issues are tough, and without knowing what your backend looks like, it's hard to tell what problem you are having. Here is an alternate solution that doesn't include keys. This problem will only exist in your development environment UNLESS you are separating your backend and frontend on separate domains ie (www.frontend.com and www.backend.com).

In your front end you can do this,

headers: {
                    Accept: "application/json",
                    "Content-Type": "application/json",
                    "Access-Control-Allow-Credentials": true,
                }

Then in your backend you can do this::

app.use(
    cookieSession({
        name: "session",
        keys: [keys.COOKIE_KEY],
        maxAge: 24 * 60 * 60 * 100
    })
);

router.use(function (req, res, next) {
    res.set("Access-Control-Allow-Origin", 'http://localhost:3000/'); 
     res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");
     res.header("Access-Control-Allow-Credentials", true);
     res.header
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With, access-control-allow-credentials");

Basically this is CORS telling you that it only takes CROSS ORIGIN DOMAIN requests from whatever you specify in your backend. Try this and let me know.

I've tried your settings, but it still error, need the correct "Access-Control-Allow-Origin".. — Moh Jonaidy, Dec 17 '19 at 12:50

Fetch api fail CORS

2 Answers2