[nextjs] External URL is being blocked by CORS policy

[5ervant]

Referring to my react-three-fiber "useLoader external URL is being blocked by CORS policy" issue.

Is there a way to configure Next.js server's CORS policy?
If any, where's the guideline?

Because whenever I load external files on my react-three-fiber scene, I'm getting this console error:

Access to XMLHttpRequest at 'https://github.com/zeit/next.js/blob/canary/examples/with-three-js/public/glb/stork.glb' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here's my "server.js":

const { startServerAsync } = require('@expo/next-adapter');

startServerAsync(__dirname, {
  port: 3001,
});

This is definitely important functionality for a Next.js application.
I hope there's already a fix for this.

Reference

• Any example how to use react-three-fiber's useLoader on react-native?

---

I already tried this "server.js" code:

const { createServerAsync } = require('@expo/next-adapter');
const Cors = require('cors');

const projectRoot = __dirname;

createServerAsync(projectRoot, Cors()).then(({ server, app }) => {
  const port = 3000;

  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

But getting this terminal error:

C:\Users\USER\Documents\PROJECTS\PLATFORM\APP_NAME\node_modules\cors\lib\index.js:219
            originCallback(req.headers.origin, function (err2, origin) {
                               ^

TypeError: Cannot read property 'headers' of undefined

[5ervant]

@EvanBacon May I know if there's an example how to load a .GLB file with expo-three?

[EvanBacon]

In React Native you can load different asset types like this https://github.com/expo/expo-three#expothreeloadasync
I'm unsure how to do the same in Next.js.

[5ervant]

BUG: By the way, app: (App) => App is throwing an UnhandledPromiseRejectionWarning: TypeError: app.getRequestHandler is not a function.

const { createServerAsync } = require('@expo/next-adapter');
const cors = require('cors');

createServerAsync((projectRoot = __dirname), {
  // UnhandledPromiseRejectionWarning: TypeError: app.getRequestHandler is not a function
  app: (App) => {
    App.use(cors()); // To enable all CORS requests
    return App;
  },
}).then(({ server, app }) => {
  // ...
});

---

I'll end up and try using react-native-webview to support multi-platform Three.js graphics.

[github-actions]

This issue is stale because it has been open for 60 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.