关于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