kuayu react_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也会配置代理处理请求