Node.js 在部署到heroku之后，后端的req.query在React前端变成了json，如何修复它？

这个问题与经济密切相关

后端：

//route: GET /shop
//note: get all the products on shop page
//access: public
router.get('/', async (req, res) => {
    try {
        let items

        //sort by category
        if(!req.query.category) {
            items = await Product.find()
        } else {
            items = await Product.find({category: req.query.category})
        }
        //sort by price and letter
        if(req.query.sortBy) {
            let sort ={}
            const sortByArray = req.query.sortBy.split(':')
            sort[sortByArray[0]] =[sortByArray[1]]
            items = await Product.find().sort(sort).exec()
        }

        res.json(items)
    } catch (error) {
        console.error(error.message)
        res.status(500).send('Server error')
    }
})

行动：

//get all the products
export const getProducts = () => async dispatch => {
    try {
        const res = await axios.get(`/shop${window.location.search}`)

        dispatch({
            type: GET_PRODUCTS,
            payload: res.data
        })
    } catch (error) {
        dispatch({
            type: PRODUCT_ERROR,
            payload: { msg: error.response.statusText, status: error.response.status }
        })
    }
}

过滤器链接的前端：

<a href="/shop?category=music" >MUSIC</a>

如何从前端获取产品渲染

import React, {useEffect, Fragment } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

import Loader from '../layout/Loader'
import ProductItem from './ProductItem'

import { getProducts } from '../../actions/products'
import { addToCart } from '../../actions/cart'


const Products = ({
    getProducts,
    addToCart,
    product: {
        products,
        loading
    }
}) => {

    useEffect(() => {
        getProducts()
    }, [getProducts])

    return  loading ? <Loader /> : (
        <Fragment>
            <section className="products-grid">
            {products.map(product => (
                <ProductItem key={product._id} product={product} addToCart={addToCart} />
            ))}
            </section>
        </Fragment>
    )

}

Products.propTypes = {
    product: PropTypes.object.isRequired,
    getProducts: PropTypes.func.isRequired,
    addToCart: PropTypes.func.isRequired
}

const mapStateToProps = state => ({
    product: state.product
})

export default connect(mapStateToProps, {getProducts, addToCart})(Products)

import React，{useffect，Fragment}来自“React”
从“道具类型”导入道具类型
从“react redux”导入{connect}
从“../layout/Loader”导入加载程序
从“./ProductItem”导入ProductItem
从“../../actions/products”导入{getProducts}
从“../../actions/cart”导入{addToCart}
常数乘积=({
getProducts，
addToCart，
产品：{
产品，
加载
}
}) => {
useffect（（）=>{
getProducts（）
}，[getProducts]）
返回装载？：(
{products.map（product=>(
))}
)
}
Products.propTypes={
产品：PropTypes.object.isRequired，
getProducts:PropTypes.func.isRequired，
addToCart:PropTypes.func.isRequired
}
常量mapStateToProps=状态=>({
产品：state.product
})
导出默认连接（MapStateTops，{getProducts，addToCart}）（产品）

它在我的开发环境中运行良好，当单击音乐时，我会将其过滤如下： 然后我部署到heruko（这意味着我们运行构建等）。现在在部署的版本上，当我单击我的过滤选项时，它们变成了json字符串，就像我们从后端直接得到浏览器的响应一样，如下所示：

网址如下：

我已经试过了

正在将部署的地址添加到axios.get，但它不起作用

将客户端json文件中的代理更改为已部署的应用程序地址（在更改之前），也不起作用

---

那么，如何解决此问题，使其与我的开发环境完全相同？

您的问题似乎是您的

后端

与

前端

具有相同的url。这意味着，当你通过

myurl.com/

进入应用程序时，它会工作，但如果你在

myurl.com/shop

中刷新页面，它会尝试访问

后端

api

尝试解决此问题的一种方法是在后端请求上附加

/api

。所以你会得到

router.get（'/api'，async（req，res）=>{…}

在前面

const res=wait axios.get（`/api/shop${window.location.search}`）

虽然它可能无法解决所有问题，但值得一试

---

我不清楚你的结构是如何设置的，但你可能还需要在整个前端/后端通信中做一些更改。

看起来你的问题是你的

后端

与你的

前端

有相同的url。这意味着，当你通过

myurl.com/

进入应用程序时，它将不起作用rk，但是如果您在中刷新页面，比如说

myurl.com/shop

，它将尝试访问

后端

api

解决这个问题的一种方法是在后端请求上附加

/api

router.get（'/api'，async（req，res）=>{…}

在前面

const res=wait axios.get（`/api/shop${window.location.search}`）

虽然它可能无法解决所有问题，但值得一试

---

我不清楚您的结构是如何设置的，但您可能还需要在整个前端/后端通信中进行一些更改。

您能否添加一个您得到回复的示例？您的组件乍一看似乎是正确的，因此我无法理解到底是什么happening@JCQuintas是的，我添加了更多的代码加上t他用pix作为参考。啊！哈哈，这看起来很糟糕，很可能是你的heroku配置或react中的路由有问题。不过我还是打赌heroku配置。你可能想看看开发工具上的“网络”选项卡，看看发生了什么。@JCQuintas我也怀疑heroku发生了什么事，但不知道发生了什么，而且如何修复。我检查了问题链接的“网络”选项卡，它没有显示错误，但Redux devtool确实说它没有找到存储。这说明了一些问题。因为使用其他工作页面时，存储会出现。你介意共享其托管的heroku url吗？你能添加一个你正在返回的响应的示例吗？你的组件似乎乍一看，我没能理解到底是什么happening@JCQuintas是的，我添加了更多的代码和pix供参考。啊！哈哈，这看起来很糟糕，可能是你的heroku配置或react中的路由有问题。不过我打赌是heroku配置。你可能想看看devtools to s上的网络选项卡ee发生了什么。@JCQuintas我也怀疑heroku出了什么问题，但不知道如何解决。我检查了问题链接的“网络”选项卡，没有显示错误，但Redux devtool确实说找不到存储。这说明了一些问题。因为在其他工作页面上，存储会出现。你介意shar吗将heroku url托管在？OMG！你是我的英雄！我想它在我的开发环境中工作，因为我们运行两个不同的服务器，localhost:3000和localhost:5000，这就是命名问题似乎没有冲突的原因。现在我应该记得在将来将后端的所有内容都放到一个称为api的东西中，以避免此类问题。G小伙子来帮忙：）天哪！你是我的英雄！我想它在我的开发环境中起作用，因为我们运行两个不同的服务器，localhost:3000和localhost:5000，这就是为什么命名问题似乎没有冲突。现在我应该记得在将来把后端的所有东西都放进一个叫做api的东西中，以避免这样的问题。很高兴帮助：）