Vue中使用代理进行跨域

跨域是前后端联调之间老生常谈的一个问题,产生跨域的根本原因是:

浏览器的同源策略:是浏览器最核心也是最基本的安全功能

会出现跨域的情况

协议不同(http/https)
端口不同(127.0.0.1:80/127.0.0.1:8080)
域名和ip(如localhost请求127.0.0.1)
一级域名和二级域名
域名完全不同

解决跨域的方式(非前端)

后端代理
cors(跨域资源共享)

前端跨域

jsonp:script标签的src属性不存在跨域,请求的结果是一个回调函数

Vue中的代理解决跨域

Vue中的代理其实是后端代理,通过配置proxyTable(使用http-proxy-middleware中间件),浏览器先发送给自己的服务器,自己的服务器再请求远程服务器上的资源

vue.config.js的代理配置

module.exports = {
    publicPath: '/',
    devServer: {
        disableHostCheck:true,
        //若有一个127.0.0.1/api/getInfo接口,则按如下配置
        proxy: {
            '/api':{
                target:"http://localhost:3000",
                ws:true,
                changeOrigin:true,
             },
        }
    },
};