react中配置代理解决跨域问题

0.53字数 162阅读 1253

项目中遇到请求跨域问题,我们一般需要项目中配置代理解决。
我的项目是create-react-app2.0版本生成的。

  • 首先安装包 http-proxy-middleware
npm install http-proxy-middleware --save
# or
yarn add http-proxy-middleware
  • 然后在src目录下创建 setupProxy.js 文件
  • 最后设置代理
// setupProxy.js
const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api', {  //`api`是需要转发的请求 
      target: 'http://localhost:5000',  // 这里是接口服务器地址
      changeOrigin: true,
    })
  )
}

这里需要注意的是我们的axios的baseURL,设置的时候不能还设置加上原来服务器域名的地址,应该只设置 /api 就好了,我是在这里犯了错误

axios.defaults.baseURL = '/api';

我们请求数据的时候就可以

axios.post('/v1/register');

经过上面几个步骤我们应该是能跨域访问服务器了。