关于react、umi的跨域问题

**

以下方法，开发环境下有用，但是生产环境就用不了

**
出现上面的问题：就是跨域问题了

针对跨域问题有两种解决方法：

1. 后端：Access-Control-Allow-Origin 设置成"*",(之所以没采用这个，是因为后端人员说安全性不高)

2. 前端：所用的框架都自带跨域的用法（自行百度）

react框架的两种前端跨域方式：

1.我这边用的是基于react的umi框架

步骤1：找到.umirc.js文件，增加proxy这部分内容

  proxy: {
        '/api1': {
          target: 'https://dev.lenovo-mr.com',//添加需要跨域的地址
          pathRewrite: { '^/api1': '' },  //会删除掉api1
          changeOrigin: true  
        }
      }

步骤2：接口部分——在调用的api前省略http：XXXXXX 添加上’api1’(之所以写api1是因为用项目里用/api的接口太多，为了区分和别的接口的，所以用api1)

运行就可以了！

2. react框架

是下面这种图;

步骤1：在src下创建setupProxy.js文件，并添加内容

const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      target: 'https://XXXXXX', //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      secure: false,
      pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
 
  )
}

步骤2：如上面方式1的步骤2

运行完事了