問題描述：訪問接口請求時候遇到了下面的問題

image.png

使用前端:react

1.安裝http-proxy-middleware

npm install http-proxy-middleware

2.配置代理

const proxy = require('http-proxy-middleware')
module.exports = function(app) {
    app.use(
        proxy.createProxyMiddleware('/quality', { //`api`是需要轉(zhuǎn)發(fā)的請求
            target: 'http://xxx:xxxxxx/', // 這里是接口服務(wù)器地址
            changeOrigin: true
      
        })
    )
}

在src目錄下新建js文件：setupProxy.js,在模塊中配置url地址（上述代碼）

3.post請求接口

function Standard() {
    const [code,setCode]=useState(500);
    const [data,setData]=useState(0);
    useEffect(()=>{
            axios.post('/quality/v1/standard/save',{
                columnCName:'名稱',
                columnName:'ss',
                columnType:0,
                remark:'備注'
            })
                .then(function (response) {
                    console.log(response);
                    console.log(response.data);
                    console.log(response.code);
                    //const {itme,setItem}=useState(4);
                    //setCode(response.data);
                    //setData(response.data);
                    //code=response.code;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },[]
    );
    return(
        //this.response.data;
        <div>{data}</div>
    );
}

export default Standard;

5.接口請求成功

image.png

備注：比較常見的解決方式是在后端處理處理請求進(jìn)行response.setHeader的方式攔截處理請求，還有就是前端nginx也會配置代理處理請求