在Heroku上部署后做出反应时出现网络错误

问题描述

我在heroku应用程序上部署了我的MERN项目，但是当我尝试提交表单时，它会在控制台中向我发送此错误：

从源访问“ localhost：8000 / api / products”处的XMLHttpRequest “ https://thebeuter.herokuapp.com”已被CORS政策阻止：跨源请求仅支持以下协议方案：http，数据，chrome，chrome扩展名，https。 Form.jsx：69错误：网络错误在e.exports（createError.js：16）在XMLHttpRequest.d.onerror（xhr.js：83）

这是我的server.js：

const express = require("express"),app = express(),cors = require("cors"),port = process.env.PORT || 8000,db = "beuter",path = require("path"),server = app.listen(port,() => console.log(`Listening to on port ${port}`));

app.use(cors());
app.use(express.json());

if (process.env.NODE_ENV === "production") {
    app.use(express.static('beuter/build'))

    app.get('*',(req,res) => {
        res.sendFile(path.resolve(__dirname,'beuter','build','index.html'));
    })
}

console.log(port)

require("./server/config/database.config")(db);
require("./server/routes/product.route")(app);

这是我的Form.jsx：

const addProduct = (e) => {
    e.preventDefault();
    const product = {
      title,title_url,price,description1,description2,description3,description4,description5,img_url1,img_url2,img_url3,img_url4,size,size2,fit,fit2,category,};
    axios
      .post("localhost:8000/api/products",product)
      .then((res) => {
        if (res.data.errors) {
          setErrors(res.data.errors);
        } else {
          navigate("/");
        }
      })
      .catch((err) => console.log(err));
  };

  return (
...
...
...
)

我该如何解决？这是我的项目github： https://github.com/nathannewyen/the-beuter

谢谢！

已更新：

ShopAllProducts.jsx：

  useEffect(() => {
    const fetchItems = async () => {
      setLoading(true);
      const res = await axios.get("http://localhost:8000/api/products");
      setProducts(res.data);
      setLoading(false);
    };
    document.title = `Shop - The Beuter`;
    fetchItems();
  },[props]);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

heroku heroku reactjs reactjs