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

怎么解决跨域问题呢,就是设立一个代理服务器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重启一遍

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐