2021-04-14 react vue 跨域 解决

 

浏览器存在同源策略 

（所谓同源是指：“域名”、“协议”“端口”均为相同）

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
    }
  }))
}