Vue配置代理服务器
在vue.config.js文件夹中写入如下代码:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://www.baidu.com/', //后台接口地址
ws: true, //如果要代理 websockets,配置这个参数
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '' //重写路径
}
}
}
}
}
这样所有出现/api的地方都会变成网址
React配置代理服务器
在src文件夹下建立一个setupProxy.js文件,并写入以下代码:
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
proxy(
'/api', { // 当发起以 /api 为前缀的请求时,触发该代理
target: 'http://localhost:5000', /* 要转发的地址 */
changeOrigin: true, /* 控制服务器接收的 Host 字段的值 */
pathRewrite: { '^/api': '' }
})
)
}
这样所有出现/api的地方都会变成网址