has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource express react client

Issue

Tryed a couple links here, some tutorials and documentations and running after my tail because i’m not getting anywhere.

Service code:


const express = require('express')
const cors = require('cors');

const app = express();
const router = express.Router()

app.use(json());
app.use(router);
const PORT = process.env.PORT || 5000
var server_host = process.env.YOUR_HOST || '0.0.0.0';

const corsOptions = {
    origin: ['http://localhost:3000', 'https://swapee-interface.vercel.app/', 'https://app.swapee.io'] 
}

app.listen(PORT, server_host, () => {
    console.log(`server is listening on port: ${PORT}`)
})

router.get('/:chain/:dex/:token', cors(corsOptions), async(req, res) =>{
 //some logic
})

Client code:

    useEffect(() => {
        axios({
            url: `https://swapee-api.herokuapp.com/${items.chain}/${items.dex}/${items.address}`,
            method: 'get',
        })
        .then((res) => { 
            console.log(res)
            setTokenPrice(res.data) })
    }, [])

    useEffect(() => {
        axios({
            url: `https://swapee-api.herokuapp.com/${items.chain}/${items.dex}/${address}`,
            method: 'get',
        })
            .then((response) => {
                console.log(response)
                setCoinPrice(response.data)})
      // empty dependency array means this effect will only run once (like componentDidMount in classes)
      }, []);

Error:

Access to XMLHttpRequest at 'https://swapee-api.herokuapp.com/137/Quickswap/0xe9e7cea3dedca5984780bafc599bd69add087d56' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Maybe i need to be specific about the methods that i’m allowing but i think that i already tryed.

Solution

Either try this:

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());
app.use(express.json());

const PORT = process.env.PORT || 5000;
var server_host = process.env.YOUR_HOST || '0.0.0.0';

app.listen(PORT, server_host, () => {
  console.log(`server is listening on port: ${PORT}`);
});

app.get('/:chain/:dex/:token', async (req, res) => {
  //some logic
});

Or this:

const express = require('express');
const cors = require('cors');

const app = express();

app.use(express.json());

const PORT = process.env.PORT || 5000;
var server_host = process.env.YOUR_HOST || '0.0.0.0';

const corsOptions = {
  origin: [
    'https://swapee-api.herokuapp.com/',
    'http://localhost:3000',
    'https://swapee-interface.vercel.app/',
    'https://app.swapee.io',
  ],
};

app.listen(PORT, server_host, () => {
  console.log(`server is listening on port: ${PORT}`);
});

app.get('/:chain/:dex/:token', cors(corsOptions), async (req, res) => {
  //some logic
});

Answered By – Daniyal Malik

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published