HELP CORS Access-Control-Allow-Origin Error

FiveM Resource Development Discussion
1

Hello everyone,
I’m having an issue with the CORS and don’t really know how to solve it as I’m not a ressource maker or what ever it’s called lol, so i’m doing a web app for a FiveM server and when I’m trying to access any of the .json files from ex.em.ple.ip:30120 I have a big Red Console Error saying :

Access to XMLHttpRequest at ‘https://ex.em.ple.ip:30120/info.json’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

So now I’m stuck not knowing how to access the “requested resource” to pass the header and all the previous posts that I have read couldn’t help.

And when trying to access the url with Insomnia, Postman or my browser it works… Heeelp

So thanks in advance for anyone who has a clue :slight_smile:

2

Every resource NUI is generated in an iframe with an origin at something like https://cfx-nui-resourcename, which causes cross origin issues with pretty much everything. I don’t know exactly how to solve your problem, but you can start here jquery - Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not? - Stack Overflow

3

Hey !
Thanks for you reply I’ve been looking at it for hours nothing worked, untill this man came like an angel and gave me the answer thanks @TheIndra !!!
(How to fetch server info - #26 by TheIndra)
I changed his code a bit and put it in my website’s backend now it works and I don’t have cors issues anymore !

const express = require("express")
const http = require('http')
const router = express.Router()


router.get('/info', (req, res) => {
    http.get("http://ip:30120/info.json", (response) => {
        let result = ""

        response.on("data", (data) => {
            result += data
        })
        response.on('end', () => {
            if(response.statusCode == 200){
                try{
                    res.json(JSON.parse(result))
                }catch(e){
                    console.log("An error occured while fetching /info")
                }
            }
        })
    })
})

module.exports = router

So now on my React front-end I can make the calls needed to the backend with Axios

Thanks guys !

1 Like