React 解决前端跨域问题

楼主^#

更多发布于：2020-07-09 09:18

首先下载依赖

npm http-proxy-middleware

下载完成过后在src文件夹下新建一个setupProxy.js文件，后缀必须为js，ts不支持。

图片：QQ图片20200709091021.png

里面的配置

const { createProxyMiddleware } = require('http-proxy-middleware');   //引入
module.exports = function(app){
  app.use(
    createProxyMiddleware(
      '/api',{      //使用/api替换http://地址
        target:'http://111.229.83.241:9601/',
        changeOrigin:true,    //changeOrigin默认是false：请求头中host仍然是浏览器发送过来的host,
                              // 如果设置成true：发送请求头中host会设置成target·
        pathRewrite: {        
          '^/api': '',        //将api代理到target网址，必写，不写会直接代理到http://111.229.83.241:9601/api
        },
        secure: false, // 是否验证证书
  }))
};

然后验证

componentDidMount() {
  axios.get('/api/user/role/getRoleList').then((res)=&gt;{
    console.log('获取的角色');
    console.log(res);
    this.datalist = res
  })
}

结果成功请求

图片：QQ图片20200709091704.png

喜欢1

React 解决前端跨域问题

最新喜欢：