javascript - 为什么在反应中加载带有危险SetInnerHTML的图像返回403

Question

我正在使用dangerouslySetInnerHTML这样的反应来呈现动态 html：

<div dangerouslySetInnerHTML={createMarkup(data)} />

function createMarkup(data) {
     return { __html: data.content }
}

但是从 url 加载一些图像时，它返回 403 错误。然后我把url( https://img.ithome.com/newsuploadfiles/2021/6/b632b078-a6b4-4658-b253-3e4d81fcda26.jpg)链接粘贴到浏览器直接打开，加载图片成功！！！为什么会这样？我应该怎么做才能避免 403 错误？

<p><img src="https://img.ithome.com/newsuploadfiles/2021/6/b632b078-a6b4-4658-b253-3e4d81fcda26.jpg" /></p><p>bababababababa</p>

这是文章详细信息的完整代码：

import React, { Component } from 'react'
import CustomBreadcrumb from '@/components/CustomBreadcrumb'
import { Layout, Divider, Row, Col, notification, Form } from 'antd'
import '@/style/view-style/table.scss'
import { withRouter } from 'react-router-dom'
import { getArticleDetail } from '../../../../../service/cruise/ArticleService'
import queryString from 'query-string'
import { formatTime } from '../../../../../api/StringUtil'

class ArticleDetail extends Component {
    state = {
        loading: false,
        article: {}
    }

    enterLoading = () => {
        this.setState({
            loading: true
        })
    }

    componentDidMount() {
        let id = this.props.match.params.id
        getArticleDetail(id)
    }

    componentWillUnmount() {
        notification.destroy()
        this.timer && clearTimeout(this.timer)
    }

    render() {
        let data = this.props.article.articleDetail

        if ((data && Object.keys(data).length === 0) || data === undefined) {
            return <div>No Data</div>
        }

        function createMarkup(data) {
            return { __html: data.content }
        }

        return (
            <Layout className='animated fadeIn'>
                <div>
                    <CustomBreadcrumb arr={['应用', 'Cruise', '文章', '详情']}></CustomBreadcrumb>
                </div>

                <Row>
                    <Col>
                        <div className='base-style'>
                            <h3 id='basic'>{data.title}</h3>
                            <Divider />
                            <div>作者：{data.author}</div>
                            <div>日期：{formatTime(data.pubTime)}</div>
                            <div dangerouslySetInnerHTML={createMarkup(data)} />
                        </div>
                    </Col>
                </Row>
            </Layout>
        )
    }
}

export default withRouter(Form.create()(ArticleDetail))

标签： javascriptreactjs