vue3.0本地调试，设置代理（解决跨域）

1，在项目根目录创建vue.config.js

module.exports = {
  
    devServer: {
        open: true,
        proxy: {
            '/api': {
                target: 'http://localhost:3000',//要代理的本地api地址，也可以换成线上测试地址
                changeOrigin: true,//允许跨域
                pathRewrite:{"^/api":"/api"}//将/api开头替换为/api
            }
        }
    },
    lintOnSave: false// 屏蔽EsLint
}

用代理, 首先你得有一个标识, 告诉他你这个连接要用代理. 不然的话, 可能你的 html, css, js这些静态资源都跑去代理. 所以我们一般只有接口用代理, 静态文件用本地.

‘/api’: {}, 就是告诉node, 我接口只有是’/api’开头的才用代理.所以你的接口就要这么写 /api/xx/xx. 最后代理的路径就是 http://xxx.xx.com/api/xx/xx.

可是不对啊, 我正确的接口路径里面没有/api啊. 所以就需要 pathRewrite,用”^/api”:”, 把’/api’去掉, 这样既能有正确标识, 又能在请求接口的时候去掉api.