React 解决跨域问题

最简单的方法 .后台更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 

通过 CRA 中自带的配置，借助第三方包 http-proxy-middleware 来实现代理功能

0. 安装：npm i http-proxy-middleware -D
1. src/setupProxy.js 中：

const baseURL = process.env.REACT_APP_URL

module.exports = function (app) {
  app.use(
    // 代理标识
    '/api',
    // 代理配置
    createProxyMiddleware({
      // 目标服务器地址
      target: baseURL,
      changeOrigin: true,
      pathRewrite: {
				// 去掉接口中的 /api 前缀
        '^/api': ''
      }
    })
  )
}

在配置的请求代码中

// 一般来说，线上服务器也有代理配置，并且代理配置与本地代理配置相同，此时，就不再需要额外处理
// 但是，对于我们自己的代码来说，打包后本地启动演示项目时是没有代理的，所以，此处可以通过环境变量来判断是否为开发环境，如果是就走代理；否则，直接使用原始地址【针对本地演示的特殊处理】
// 线上部署项目，一般使用： nginx 服务器
const baseURL =
  process.env.NODE_ENV === 'development' ? '/api' : process.env.REACT_APP_URL

const http = axios.create({
  baseURL,
  timeout: 5000
})