Access-Control-Allow-Origin blocks access when sending push tokens with expo-server-sdk

hi guys!

I need to send some push notifications to my app users when they do some stuff on our website.

I am using firebase to host my website, and am using ‘expo-server-sdk’ to make the request to push the notifications.

I am getting the following error:

Failed to load https://exp.host/--/api/v2/push/send: Response to preflight request doesn’t pass access control check: The ‘Access-Control-Allow-Origin’ header has a value ‘https://expo.io’ that is not equal to the supplied origin. Origin ‘https://bla.com’ is therefore not allowed access.

Does anyone know how to fix this?

could you post your notification code & server code?

did you follow the instruction on the push notifications page and set the push_endpoint to your server?

I assume you’re also using the node server sample code as well?

It sounds like you are trying to contact the Expo push service from a browser. It is not designed for that – your server is supposed to be responsible for sending notifications through Expo. (Heads up – with Firebase, you must be on a paid plan to contact non-Google servers from Firebase servers.)

Hi guys,
just to let you know what happened.

For some reason, the order of that I was building the header was creating the error.

this is the code I have ended up using:

const PUSH_ENDPOINT = 'https://exp.host/--/api/v2/push/send';
        let data = {
            "to": to,
            "title": title,
            "body": message,
            "sound": "default",
            "priority": 'high',
        }

        fetch(PUSH_ENDPOINT, {
            'mode': 'no-cors',
            'method': 'POST',
            'headers': {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        }).catch(err => console.log(err))

the simple change from:

  'headers': {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            'mode': 'no-cors',
            'method': 'POST',

to

 'mode': 'no-cors',
            'method': 'POST',
            'headers': {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },

did the trick.

ORDER MATTERS!

Hope this helps someone else

3 Likes

Even with no-CORS, I believe you won’t be able to inspect the response from the Expo push server. This means you will not be able to look for DeviceNotRegistered errors and may continue sending notifications to inactive devices which can result in being blocked by Apple or Google.

You should send notifications from your server and always handle the response, especially for any production projects.

Try with this
http://cors-anywhere.herokuapp.com/

This is happening because of the CORS (Cross Origin Resource Sharing) error. This error occurs when you try to access a domain/resource from another domain. You cannot issue requests through the XMLHttpRequest to other domains or subdomains. For example, if you are doing something like writing HTML and Javascript in a code editor on your personal computer, and testing the output in your browser, you might probably get error messages about Cross Origin Requests .

JSONP ( JSON with Padding ) is a method commonly used to bypass the cross-domain policies in web browsers.

If this is for local development and you are using Chrome , you need to run Chrome with a couple of arguments to relax security like this:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999

The other easy way out, would be to create a proxy on your local server, which gets the remote request and then just forwards it back to your javascript.

this save mi proyect whas helpfull thrancks from dominican republic