如果没有配置代理会在发送请求时出现如下报错
解决以上报错有两种方法
方法一:在package.json中追加如下配置(适用于只访问一个服务)
"proxy":"http://localhost:xxxx"
-
优点:配置简单,前端请求资源时可以不加任何前缀。
-
缺点:不能配置多个代理。
-
工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)
方法二: 编写setupProxy.js文件
1.创建代理配置文件
在src下创建配置文件:src/setupProxy.js
2. 编写setupProxy.js配置具体代理规则
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy('/api1', {
target: 'http://localhost:3000',
changeOrigin: true, //控制服务器接收到的请求头中host字段的值
pathRewrite: {'^/api1': ''} //去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置)
}),
proxy('/api2', {
target: 'http://localhost:3001',
changeOrigin: true,
pathRewrite: {'^/api2': ''}
})
)
}
-
优点:可以配置多个代理,可以灵活的控制请求是否走代理。
-
缺点:配置繁琐,前端请求资源时必须加前缀。
总结:如果只需要访问一个服务可以直接在package.json中配置代理,如果需要访问多个服务则需要通过创建setupProxy.js文件配置