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字符串，就像我们从后端直接将响应返回到浏览器一样，如下所示：

URL在这里： Heroku app

我已经尝试

将已部署的地址添加到axios.get，但这没有用
将客户端的json文件中的代理（在http://localhost:5000之前）更改为已部署的应用程序地址，也无法正常工作

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

Answer 1

您的问题似乎是您的backend与frontend具有相同的网址。这意味着，当您通过myurl.com/进入应用程序时，它将可以使用，但是如果刷新页面时说myurl.com/shop，它将尝试访问backend api。

尝试解决此问题的一种方法是在后端请求上附加/api。这样您就可以

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

在前面

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

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

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

后端的req.query部署到heroku后，在React前端上竟然是json，如何解决？

1 个答案: