对于vue中解决跨域请求的方案

首先我们来说一下出现跨域的原因就是浏览器的同源策略问题，当我们请求的地址何我们vue或者react服务器端口号，域名，协议 有任意一个不同的话就会造成跨域的问题本质也就是浏览器的一种安全机制，但是这种问题也有办法去解决的，一般在vue项目中一般我们会使用到代理方案去解决。

 

假如当前我们的端口是3000，请求的地址的端口号是5000，这明显的进行了跨域的操作，浏览器会给我们报错的，但是我们请求的数据饭回来了吗？我们的数据是返回了，但是浏览器给拦截了，这时我们就得需要用代理的方案去解决，我自己认为代理的本质就是我们我们把浏览器的引擎给抽离掉了，也就是说我们不在通过浏览器的形式去请求，就不会存在跨域的问题。

（1）在根路径下创建vue.config.js

(2) 写入如下内容

module.exports={
    devServer:{
        open:true,//自动开启浏览器
        port:3000, //设置端口
        proxy:{ //设置devServe解决跨域问题
            "/api":{
                // 我们需要告诉devserver帮我们解决那个地址的跨域
                target:"http://localhodt/5000",
                changeOrigin:true,//控制服务器收到的请求头中的Host的值，如果不加(changeOrigin:flase) host的只为3000，如果加了(changeOrigin;true)以后值为5000
                ws:true,
                // 重写路径
                pathRewrite:{
                    "^/api":""
                }
            }
        }
    }
}

注意：当我访问5000端口的内容的时候，我们开始一定要确定在5000端口下有我们所请求的内容的。不然也会报错404