方案一
使用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')
