将Create-React-App与Apache VirtualHost一起使用

如何解决将Create-React-App与Apache VirtualHost一起使用

我正在尝试为一家公司开发一个项目。该公司的API仅允许来自两个来源的请求：他们自己的主机和xyz.localhost。

首先，我仅使用jQuery开发了该项目（通过CDN加载）。借助Apache VirtualHost设置，它可以正常工作-我可以访问API。

现在，我想重构项目并与它一起使用React。我用create-react-app创建了一个反应目录。

问题是：我可以让create-react-app使用xyz.localhost，但是在Chrome中我仍然收到CORS错误消息：

Access to fetch at 'http://api.thatcompany.com/search?search=a' 
from origin 'http://xyz.localhost:3000' has been blocked by CORS policy

有人对如何使它起作用有任何想法吗？ 预先谢谢你。

---

/private/etc/apache2/httpd.conf：

# Virtual hosts
#Include /private/etc/apache2/extra/httpd-vhosts.conf
Include /private/etc/apache2/vhosts/*.conf

/ private / etc / hosts：

127.0.0.1       xyz.localhost
255.255.255.255 broadcasthost
::1             xyz.localhost

/private/etc/apache2/vhosts/xyz.localhost.conf：

<VirtualHost *:80>
        DocumentRoot "/Users/MYUSERNAME/dev_projects/MY-REACT-APP/public"
        ServerName xyz.localhost

        <Directory "/Users/MYUSERNAME/dev_projects/MY-REACT-APP/public">
                AllowOverride All
                Require all granted
        </Directory>

        <filesMatch "\.(html|htm|js|css)$">
                FileETag None
                <ifModule mod_headers.c>
                        Header unset ETag
                        Header set Cache-Control "max-age=0,no-cache,no-store,must-revalidate"
                        Header set Pragma "no-cache"
                        Header set Expires "Wed,11 Jan 1984 05:00:00 GMT"
                </ifModule>
        </filesMatch>
</VirtualHost>

我的create-react-app启动脚本：

"scripts": { "start": "HOST=xyz.localhost react-scripts start" }

解决方法

我找到了解决方法。

我只是将VirtualHost指向Create React App的build文件夹，这可以为我提供静态文件并为我提供服务。

编辑代码非常麻烦，因为每次更新后我都必须运行npm run Build。

幸运的是，我找到了npm watch模块。这样，create react App将在每次保存时重建。在保存和刷新浏览器之间，我仍然需要等待一秒钟，这绝对不能与单独使用create react app相比，但这是一个很好的解决方案！