expo dev server - need to set/change cors policy

[bmatusiak]

Summary

We need a documented way to change dev server's cors policy.

this is important to develop with remote services. because its current configuration for cors blocks these request and connections.

What platform(s) does this occur on?

Web

SDK Version

48

Environment

expo-env-info 1.0.5 environment info: System: OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish) Shell: 5.1.16 - /bin/bash Binaries: Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.1/bin/yarn npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm npmPackages: @expo/webpack-config: ^18.0.1 => 18.1.0 expo: ~48.0.18 => 48.0.19 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 react-native: 0.71.8 => 0.71.8 react-native-web: ~0.18.10 => 0.18.12 npmGlobalPackages: eas-cli: 3.15.0 Expo Workflow: managed

Minimal reproducible example

import { io } from "socket.io-client";

const socket = io.connect("http://localhost:3000");

export default { ...socket,

};

[byCedric]

Hi @bmatusiak! Can you give an example of a remote service that needs this, and how you set this up? The minimal reproducible example doesn't seem to use Expo.

[bmatusiak]

@byCedric to reproduce. Create a blank project. Install socket.io-client

Create a file called socket.js , paste example.

Import socket.js in main entry.

$ npm run web

Follow socket.io's examples to setup server side for nodejs environment

So yes the example is a little rudimentary but identifies the problem

Remember this issue is focused on development environment, not production. As a dev server is for development... In production we manage our cors policy ourselves. And there is tons of documentation on that. But if can't run our test logic between local services, then we have a problem. And will probably advise to cancel expo as a platform and go back to webpack. Would rather not though.

[byCedric]

Alright, but how would an Expo app connect to socket io? I don't see an overlap in there, or am I missing the point?

Does connecting from the client side (web) to the server cause a CORS error for you?

[bmatusiak]

Alright, but how would an Expo app connect to socket io? I don't see an overlap in there, or am I missing the point?

Does connecting from the client side (web) to the server cause a CORS error for you?

It's expo web app that connects to external services using web APIs . Works properly if i export the build and run it on my custom server with cors disabled. But then I lost the ability to have realtime updates.

[bmatusiak]

i found docs leading to webpack configuration, https://docs.expo.dev/guides/customizing-webpack/ here, i was able to resolve the issue

[dlindenkreuz]

How would this work using metro instead of webpack?

[medv]

How would this work using metro instead of webpack?

You can use patch-package to whitelist additional domains in the relevant metro file in node_modules. If you search for the error, you will find it. The easiest patch to make is to add localhost or your own preferred scheme in the condition. This feature is surprising.

[dlindenkreuz]

You can use patch-package

Oof. I ended up with a separate express server that uses http-proxy-middleware to add the required headers:

const express = require("express")
const { createProxyMiddleware } = require("http-proxy-middleware")
const PORT = 8080

const proxy = createProxyMiddleware({
  target: "http://localhost:8081",
  changeOrigin: true,
  ws: true,
  onProxyRes: (proxyRes) => {
    proxyRes.headers["cross-origin-opener-policy"] = "same-origin"
    proxyRes.headers["cross-origin-embedder-policy"] = "require-corp"
    proxyRes.headers["cross-origin-resource-policy"] = "*"
  },
})

const app = express()
app.use(proxy)
app.listen(PORT)
console.log(`Proxy listening on port ${PORT}`)

[dlindenkreuz]

@byCedric Metro is now the recommended dev server, which makes this issue valid again. Otherwise, let me know if you want me to create a new issue.

Would be great if someone from Expo looked into this and provided some guidance.