关于react用script标签引入jsx文件的问题
react在处理需要动态加载的dom元素时很好用,在工作中用到了一些,其中引入的时候出现了一些小问题,就是如图,当我想用script标签引入jsx文件的时候,
出现了下面这个问题:
JSXTransformer.js:191 XMLHttpRequest cannot load file:///F:/apache-tomcat-7.0.78/webapps/gaofen/jsx/map-index.jsx. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
后来查了一下,是因为chrome不允许你使用XHR(XMLHttpRequest)加载file://
开头的url文件,而jsx就是用xhr来加载文件的
解决问题的办法有3个:
1,换个浏览器。比如firefox,好像可以呢,但我没试。
2,直接把代码写在script标签里,就像第一张图里被注释掉的那段代码。不过随着代码量增多这样做并不明智。
3,放在web容器里,最好的解决方案。比如tomcat就可以。别直接点开html文件了,而是放进去之后用http://localhost:8080/gaofen/index.html这样的链接访问,问题就解决了。
弄前端页面的时候总觉得根本用不着web容器,其实有些情况下还是要用的哦。
参考解决方案来自stackoverflow:https://stackoverflow.com/a/20912211
以上是 关于react用script标签引入jsx文件的问题 的全部内容, 来源链接: utcz.com/z/382337.html