vue axios解决跨域问题

什么是跨域问题？简单的说就是浏览器（前端人员）跟服务器不同端，浏览器为了安全不允许再不同网络下的数据通信，不能传输数据的问题

怎么解决跨域问题呢，就是设立一个代理服务器8080，跟浏览器8080同一个域，然后将服务器5000发过来的数据先发送给代理服务器8080，由于代理服务器跟浏览器同一个域，就可以方便的将代理服务器8080的数据给浏览器8080。代理服务器转发的数据浏览器就可以接收到了。
不难理解

首先第一步当然是引入axios包
终端输入

npm i axios

引入axios包

目前有两种方法进行跨域

方法1：只跨一个域，且这个域没有文件名跟前端文件同名

打开vue.config.js(没有的同学就在目录下新建一个）输入以下东西

  module.exports={
  	devServer:{
       proxy:'http://xxxxxx:8080'
    }
  }

这个就是跨域服务器，表示代理服务器将读取http://xxxxxx:8080下的东西

任意写一个axios请求

 GetNum1(){
    //本地浏览器文件没有selectArea文件，这个是服务器端的文件
    //直接写在浏览器域名http://localhost:8081/下就可以实现跨域了
     axios.get('http://localhost:8081/selectArea').then(
       response =>{
         console.log('请求成功'+JSON.stringify(response.data))
       },
       error =>{
         console.log('请求失败了'+error.message)
       }
     )
     console.log("收到名字了")
   },

请求成功

当然这种方法也有一个小问题，若是你的文件也有一个叫selectArea的，那axios就不会把http://localhost:8081/selectArea转化为http://xxxxxxxxx:8080/selectArea，而是直接读去你localhost下的文件了，记得注意

第二种方法 跨两个域以上的
有时候我们有不止一个服务器，这时候我们需要另外一种写法
由于有两个位置，所以我们需要将两个位置的数据各起名many（服务器1）和aaa（服务器2）

devServer:{
        proxy:{
            '/many':{
                target:'http://many:8080',
                pathRewrite:{'^/many':''}
                //正则表达式，/many 变为空字符串
                //由于前面写http://localhost:8081/many/selectArea
                //传到服务器是/many/selectArea，不是/selectArea
                //所以现在将/many去掉
            },
            'aaa':{
                target:'http://Other'
            }
        }
    }

点击发送的按钮
可以发现多了一个many，代表发送的是服务器1
看上面的代码，由于这里传过去的是/many/selectArea，服务器接收的自然是/many/selectArea，
这样子会导致接收不到相应的数据，所以需要用正则表达式将many去掉

 GetNum2(){
     axios.get('http://localhost:8081/many/selectArea').then(
       response =>{
         console.log('请求成功'+JSON.stringify(response.data))
       },
       error =>{
         console.log('请求失败了'+error.message)
       }
     )
   }

请求成功

tip：每次修改vue.config.js的时候记得关掉vue重启一遍