问题描述：访问接口请求时候遇到了下面的问题
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;
<div>{data}</div>
);
}
export default Standard;
5.接口请求成功
image.png
备注：比较常见的解决方式是在后端处理处理请求进行response.setHeader的方式拦截处理请求，还有就是前端nginx也会配置代理处理请求
