create-react-app proxy 前端项目跨域解决
方法一
1.安装http-proxy-middleware,下面两种都可。
yarn add http-proxy-middleware //npm install http-proxy-middleware -D
2.在'src'目录下新建'setupProxy.js'文件并写入以下代码(注意第二行注释)
const {createProxyMiddleware} = require('http-proxy-middleware');
//1.0.0版本前都是用proxy,1.0.0后使用porxy会报错,应使用createProxyMiddleware; module.exports = function (app) { app.use( createProxyMiddleware( '/api', { target: 'http://localhost:7001', pathRewrite: {'^/api' : ''}, changeOrigin: true, // target是域名的话,需要这个参数, secure: false, } ) ); };
3.重启服务,调用接口
axios.get('/api/getGoodsMenu').then((res)=>{ console.log(111,res) })
方法二
1.执行npm run eject 弹出配置文件
npm run eject
2.打开webpack.config.js,配置devServer
module.exports = { devServer: { //使用代理进行解决跨域的问题 proxy: {'/api': { target: 'http://127.0.0.1:7001',
pathRewrite:{'^/api' : ''}, changeOrigin: true } } } }
3.调用接口,重启项目