Version: Next

Vue开发模式跨域与代理服务器设置

跨域问题

浏览器不允许跨端口请求
解决方式1：后端在响应头里允许浏览器跨域
解决方式2：前端请求自己的前端服务端口，由前端服务端口代理请求到后端端口

在根目录新建vue.config.js

module.exports = { // node导出
    devServer:{  // 开发模式服务器
        proxy:{ // 代理
            '/api':{  //访问所有/api路径的请求都用代理
                target:"http://localhost:3000", // 目标服务器URL
                pathRewrite:{
                    '^/api': "" 
                }
            }
        }
    }
}

修改/config/index.js，dev不再访问Localhost:3000，而是/api/

export default {
    title:"lcelm",
    baseUrl:{
        dev:"/api/",//开发的时候后台接口的地址 相当于localhost:8080/api/
        pro:""//上线产品发布之后，后台接口的地址
    }
}

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

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

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

'^/iclient' 其实是一个正则表达式，详见 http-proxy-middleware 的文档中 option.pathRewrite 的部分。

'^/iclient' 应该拆分成'^' 和 '/iclient' 两个字符串，其中'^'匹配的是字符串最开始的位置。

也就是说，axios 的请求URL写成了'/iclient/myAPI/path'的话，最后会在经过 http-proxy-middleware 的代理服务器时，会变成 '/myAPI/path' ，然后代理到 http://localhost:8080 这个代理服务器下面。

另外附一张 Regexp 速查表

Vue开发模式跨域与代理服务器设置#

跨域问题#

Vue开发模式跨域与代理服务器设置

跨域问题