webpack proxy跨域

Proxy

当下前端的开发都是前后端分离开发的，前端开发过程中代码会运行在一个服务器环境下(如当前的 WebpackDevServer)，那么在处理一些后端请求的时候通常会出现跨域的问题。WebpackDevServer 内置了一个代理服务，通过内置代理就可以把我们的跨域请求转发目标服务器上(WebpackDevServer 内置的代理发送的请求属于后端 - node，不受同源策略限制)
后端代码，以 node 为例，注意 要启动服务，同时下载 koa koa-router

const Koa = require('koa');
const KoaRouter = require('koa-router');
const app = new Koa();
const router = new KoaRouter();
router.get("/",ctx=>{
    ctx.redirect("/api")//重定向
})
router.get('/api', ctx => {
    ctx.body = '我来了哈'
})
app.use(router.routes());
app.listen(8787);

前端js代码

   import axios from "axios"   
   export default async ()=>{

        // console.lo("fn") //错误演示
    // 同步    
    // axios({
     //     url: 'http://locahost:8787',
    //   }).then(res => {
    //     console.log(res);
    //   })
    // 异步
    let res = await axios({
        url: '/api',
    })
    console.log(res)
    }

修改 webpack 配置

    devServer:{ 
        contentBase:"./dist",//生成虚拟目录的路径
        open:true, //自动开启浏览器
        port:8081,  //端口
        // 开启热更新
        hot:true,
        // 即使 HMR 不生效，也不去刷新整个页面(选择开启)
        hotOnly:true,
        // 通过内置代理就可以把我们的跨域请求转发目标服务器上
        proxy: {
            '/api': {
                target: 'http://localhost:8787',
            }
            // 暗号可以有很多个
        }
    },