How to make a request to API by fetch js in Firefox?

Question

I have a web server, which has API.I used Postman to create POST and Get requests, and all worked fine. Now I've started to write a front-end app, and I cannot make a post request from browser. When I run index.html from my computer, I get this Error: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:3000/python. Reason: CORS header 'Access-Control-Allow-Origin' missing". Here is my code:

async function createRes(){
  try { const connect = await fetch ('http://127.0.0.1:3000/python',
    {method:"POST",
    body:JSON.stringify({date:"01/02/2019"}),
    headers:{"Content-Type":"application/json",
    "Access-Control-Allow-Origin":"*"
    }, 
    credentials:"include"})

    const data = await connect.json();
  } catch(error){
      console.log(error.message)} 
}

Hi Yuri, what are you using for your back-end? As others have suggested your back-end needs to have CORS enabled. It seems your using Python? So maybe something like this: https://flask-cors.readthedocs.io/en/latest/ — Inch High, Dec 09 '19 at 10:46
Hello @Yuri Molodyko, This happens very often locally. I see you're on: https://localhost:3000/python If you can do a test on an external server, it can work. Can you do the test? Have a good day and be brave! — Mickael Lherminez, Dec 09 '19 at 10:59

score 2 · Accepted Answer · answered Dec 09 '19 at 10:51

2

For Express please try:

npm install cors

Then, in your index.js file:

const app = express()
app.use(cors())

answered Dec 09 '19 at 10:51

Inch High

835
5
17

It works like that: app.use(cors( {credentials: true, origin: true})) – Yuri Molodyko Dec 09 '19 at 11:14

score 1 · Answer 2 · answered Dec 09 '19 at 10:44

1

You need to configure CORS on the web server hosting the API

answered Dec 09 '19 at 10:44

jared

473
3
16

score 1 · Answer 3 · answered Dec 09 '19 at 10:45

The problem does not lie in your front-end app, but on the server-side (your API). You have to configure your server to allow CORS requests from your app. Adding 'Access-Control-Allow-Origin' header to the request will not change anything. More about CORS here. There's nothing else I can write to help you, since you didn't provide any information about your API.

score 1 · Answer 4 · answered Dec 09 '19 at 10:45

1

You will need to enable CORS on the API you are running on localhost (http://localhost:3000/python).

Essentially moving the: Access-Control-Allow-Origin: * to your API rather than the client making the request.

answered Dec 09 '19 at 10:45

Ryan McDonough

9,732
3
55
76

How to make a request to API by fetch js in Firefox?

4 Answers4