**

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

**
在这里插入图片描述出现上面的问题:就是跨域问题了

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

  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

运行完事了

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐