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

Question

这个问题与This密切相关

后端:

//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)

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

网址在这里: Heroku app

我已经尝试过

1. 将部署的地址添加到axios.get中，但没有成功
2. 将客户端 json 文件中的代理(在 http://localhost:5000 之前)更改为已部署的应用地址，也不起作用

那么我该如何解决这个问题，使其像在我的开发环境中一样工作？

Answer 1

看来您的问题是您的后端与您的前端具有相同的网址。这意味着，当您通过 myurl.com/ 进入应用程序时，它会正常工作，但如果您在 myurl.com/shop 中刷新页面，它将尝试访问 backend api。

尝试解决此问题的一种方法可能是在后端请求上附加 /api。所以你会得到

router.get('/api', async (req, res) => {...}

在前面

const res = await axios.get(`/api/shop${window.location.search}`)

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

我没有关于如何设置结构的明确信息，但您可能还需要对整个前端/后端通信进行一些更改。