前端跨域之自食其力不靠后端...（调试阶段使用）

起因

因为某些原因，本地开发的时候老是跨域，而且需要用到线上服务器的一些接口(只有正式服务器才配置完成了，悲剧的是，这个接口不能随意开放)，所以研究了一下现行的跨域方式，感觉多多少少都需要后端的配合，要不然就是什么iframe 的 message属性之类的，支持起来感觉有难度，而且开发完成之后，要处理的东西也麻烦。。。。所以研究了一下create-react-app构建的项目自带的跨域方式

方式

通过 http-proxy-middleware这个插件能够很好的构建代理服务器完成跨域

1. yarn add  http-proxy-middleware

2. 在你的项目src 目录下建立 setupProxy.js文件,内容如下

const proxy = require("http-proxy-middleware");
module.exports = function(app) {
    app.use(
        proxy.createProxyMiddleware("/__proxy", {
            target: "https://www.baidu.com/", // 目标服务器
            changeOrigin: true,
            pathRewrite: {
                "^/__proxy": ""   			 	
                // url 重写规则
                // 会将你定义的url按照这个指定的分隔符把后面的地址拼到目标服务器的后面
                // __proxy字段随便取，想写什么就写什么，不过最好不要和别的接口重名，不然会把重名的接口也代理了。
            }
        })
    );
};

3. 具体的页面中使用

const proxy_url = `/__proxy/api/test/getAbcd/lalalallalla`

axios.get(proxy_url).then(res=>{
   	// f12 中看到的访问地址任然是本地，但是已经实际的访问地址已经成为了
   	// https://www.baidu.com/api/test/getAbcd/lalalallalla
    })

当然，，这是仅限于开发使用哈。正式上线了，这些代码要注释掉的。