记一次react处理跨域问题

问题1：

最近在学习react的时候，尝试用网上免费的api去测试接口对接及本地调试，遇到本地8080端口发起对免费api网域名的请求出现跨域问题

出现这一原因是因为该地址后端不允许前端跨域，需要后端去配置响应头允许对应ip(如：http://127.0.0.1:8080)

问题2：

明确上面接口用不了之后，我们尝试换其他的接口，当我们在本地局域网内进行开发时，前端地址为：

http://127.0.0.1:8080，后端地址为 : http://127.0.0.1:7001

这个时候，我们前端8080端口去请求后端，也会产生跨域(因为同协议，同域名，不同端口)

遇到这一情况，我们可以通过配置webpack的proxy

axios发起请求

在所有需要请求转发的接口，前面加上标识字段如：'/api_2'

在项目中webpack.config.js中配置一下转发

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, `./dist${configMap[process.env.FH_ENV].buildPath}`),
    filename: 'fh_vr.js'
  },
  devServer: {
    port: 8080,
    contentBase: path.join(__dirname, 'public'),
    overlay: {
      warnings: false,
      errors: true,
    },
    proxy: {
      '/api_2': {
        target: 'http://127.0.0.1:7001 ', //这个是被替换的目标地址(需要转发请求的地址)
        changeOrigin: true, // 默认是false,如果需要代理需要改成true
        pathRewrite: {
          ["^/api_2"]: "",
        },
      },
    }
  },
}

上面配置的 '/api_2'表示，当请求接口前缀匹配到'/api_2'时，请求地址更换为target写入的地址进行转发请求。pathRewrite 表示将匹配到的/api_2 进行重写（需要时可以进行配置，比如：后端接口中并没有'/api_2'这样的字眼，就可以对其进行替换为空，或正确的url地址）

问题3:

官网中有建议使用在package.json 中进行配置proxy和安装http-proxy-middleware的方式去处理，我试了好一会，发现并未起任何作用，可能是因为我构建项目用的不是create-react-app？还是因为我配置了wabpack.config.js文件，有知道的求告诉我一下！

附上文档create-react-app： create-react-app.dev/docs/proxyi…