浏览器存在同源策略
(所谓同源是指:“域名”、“协议”“端口”均为相同)
vue 解决
反向代理(Reverse Proxy) config 文件
proxyTable: {
'/api': { //使用"/api"来代替"http://192.168.2.189:8080"
target: '', // 请求跨域的接口
changeOrigin: true, //改变源
pathRewrite: {
'^/api': '/' //路径重写
}
}
}
例子
proxyTable: {
'/api': {
// target:'http://192.168.2.189:8080', //本地
target:'http://47.110.159.80:8080',//正式服
// target:'http://116.62.110.216:8080', //测试
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '/backstage-api/api',
}
}
},
react 解决
npm install http-proxy-middleware src下创建一个 setupProxy.js文件
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(createProxyMiddleware('/api', {
target: 'http://116.62.110.216:7777', 需要代理的后端地址
changeOrigin: false,
pathRewrite: {
"^/api": "/erp-admin/sys" 重写自己请求中的/api 替换成/erp-admin/sys
}
}))
}