Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fetch API cannot load file:///path/to/react-dom-server.node.development.js. URL scheme must be "http" or "https" for CORS request.

See original GitHub issue

Bug Report

Describe the bug

Cannot fetch <script src="..."/> on client successfully, encountering CORS issue, similar to #6374.

Fetch API cannot load file:///D:/_projects/next-learn-demo/6-fetching-data/node_modules/react-dom/cjs/react-dom-server.node.development.js. URL scheme must be "http" or "https" for CORS request.

To Reproduce

Clone https://github.com/jdmallen/next-learn-demo
Checkout branch fetch-cors-bug.
Navigate to ./6-fetching-data
Execute npm i && npm run dev

Expected Behavior

Runs script on client.

Screenshots

System Information

Windows 10 1809
Chrome 79.0.3945.117 (Official Build) (64-bit)
Next 9.1.7
Project dependencies: “isomorphic-unfetch”: “^3.0.0”, “next”: “^9.0.0”, “react”: “^16.8.4”, “react-dom”: “^16.8.4”

Additional context

All I did was change MyLayout to use a higher order function withLayout as suggested in your tutorial here and update each file to use it as shown in this fork.

Without withLayout– i.e. just using <Layout>...</Layout> component-- it works as expected.

Related to issue #6374, but this time only using packages referenced by your tutorial. Please advise. Thanks!

Issue Analytics

State:
Created 4 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

3reactions

mafshincommented, Mar 28, 2020

Getting the same with fetching-data-for-pages

Next.js Version: 9.3.2

2reactions

dkreftacommented, Feb 21, 2020

I get the same error when I’m using HOC’s

Top Results From Across the Web

Fetch API cannot load URL scheme must be "http" or "https" for ...

Open a terminal, navigate to the directory with your index file and type npx serve . This will fetch https://www.npmjs.com/package/serve and ...

Fetch API cannot load file:///path/to/react-dom-server.node ...

Fetch API cannot load file:///path/to/react-dom-server.node.development.js. URL scheme must be "http" or "https" for CORS request. #10086.

Using the Fetch API - MDN Web Docs

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses.

Fetch: Cross-Origin Requests - The Modern JavaScript Tutorial

If we send a fetch request to another web-site, it will probably fail. For instance, let's try fetching http://example.com :.

d failed to fetch. possible reasons: cors network ... - You.com

CORS ; Network Failure; URL scheme must be "http" or "https" for CORS request. ... API cannot load file:///path/to/react-dom-server.node.development.js. URL ...