react解决前端请求跨域问题

问题描述：访问接口请求时候遇到了下面的问题

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`是需要转发的请求
            target: 'http://xxx:xxxxxx/', // 这里是接口服务器地址
            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;
        
{data}
    );
}

export default Standard;

5.接口请求成功

image.png

备注：比较常见的解决方式是在后端处理处理请求进行response.setHeader的方式拦截处理请求，还有就是前端nginx也会配置代理处理请求