Vue axios 跨域问题

什么是跨域？

跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。

在vue开发时，向后台请求数据通常会遇到跨域问题：

解决办法：

1. 通过手动添加vue.config.js文件设置跨域

     devServer: {
         proxy: {    //配置跨域
             '/api': {  
                 target: 'http://localhost:3000',      //接口baseUrl
                 ws: false,
                 changeOrigin:true,//允许跨域
                 pathRewrite: {
                 /* 假如请求的真正地址为：http://localhost:3000/toplist/aerist,但我们在浏览器请求头上会看到是这样的： http://localhost:3000/toplist/aerist ,多了个/api，但并不影响我们请求数据。
            */
                     '^/api': ''
                 }
             }
         },
     }
   

2. 配置axios baseUrl。在创建axios实例的时候将baseURL设置为/api ,这时候我们的跨域就已经完成了

   const instance = axios.create({
        baseURL:'/api',
        timeout:5000
    })
   

解决完问题说说使用原理：

在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。