react开发环境跨域方案

方案一

使用proxy代理跨域 假设需要跨域访问的域名为www.baidu.com

/*
  * 在package.json中配置如下代码
*/
"proxy": "www.baidu.com"  

访问的地址需要更改

/*
  * 假设原请求地址为www.baidu.com/v1?id=10
*/
fetch('www.baidu.com/v1?id=10')
/*
  * 处理过跨域后的请求应为
*/
fetch('/v1?id=10')

需要注意改变package.json中的内容需要重启服务

方案二

手动配置跨域

• 第一步安装 http-proxy-middleware

/*
* 使用yarn安装
*/
yarn add  http-proxy-middleware 
/*
* 使用npm/cnpm安装
*/
npm/cnpm install http-proxy-middleware  --save

• 第二步src新建setupProxy.js文件

/*
*若发现下面文件start项目报错,到  https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/proxying-api-requests-in-development.md 查看文档 可能api更新了
*
*需要注意的是下面代理的是/api  意味着代理的访问路径要包含api  例如www.baidu.com/api/xx  此配置根据需求更改
*/
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:5000',
            changeOrigin: true
        })
    )
}

访问的地址需要更改

/* 
* 假设原访问地址为 http://localhost:5000/api/list
*/
fetch('http://localhost:5000/api/list')
/* 
* 配置后的访问地址应为
*/
fetch('/api/list')