0

Update :

Thank you all for teaching me to solve the problem. One brilliant guy tell me to use a webserver , but I just want to overcome the specific problem just using a single html file and a single js file. I think the question would be solved because the similar question is solved but I just did it from that step by step , it still didn't work. I am so confused and really appreciate for the specific answer.

I am a fresh man in react. As I want to create a single html file to contain the elements and .js file to contain the class of react, two errors showed:

  1. Access to XMLHttpRequest at 'xxxxxx/1.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.

  2. GET file://xxxxxxx/1.js net::ERR_FAILED

the code I typed is below:

1.html

<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="./1.js"></script>

1.js

import React from "react"
import ReactDOM from "react-dom"

const docItem = document.querySelector('#app')
ReactDOM.render(<p>hello world</p>,docItem)

How to overcome this problem? thank you

Norman Yonion Chen
  • 55
  • 1
  • 6
  • You have CORS problem loading `1.js`. Check if your server allows to access it. Your JS code is not related in any way – Justinas May 25 '21 at 06:43
  • @Justinas thankyou guys , the CORS problem is now really difficult for me. I will try it later, but I found [the similar question](https://stackoverflow.com/questions/28100644/reactjs-uncaught-syntaxerror-unexpected-token) , the solution is not involved with CORS solution. So I think it can be solved with a single method. Could you please help me with an easy way, thanks a lot. – Norman Yonion Chen May 26 '21 at 04:04

1 Answers1

1

you are using `file://xxxxxxx/1.js``to load the modules. they are not http:// so to slove this you need to install a webserver in your local PC a link a run your test code on that webserver .

  • you can use npm or yarn for creating react apps it's more simple and efficient a link
Azer8
  • 539
  • 8
  • 18
  • 1
    You can also use npm serve to host this in your local: https://www.npmjs.com/package/serve – Vijay Dev May 25 '21 at 06:43
  • Isn't it just relative path to `1.js`? – Justinas May 25 '21 at 06:44
  • 2
    yeah but he use it from his local machine that's why Origin 'null' error shows up because he is using react inside an html page not creating web apps using yarn or npm – Azer8 May 25 '21 at 06:52