(vue解决跨域问题)blocked by CORS policy: Cross origin requests are only supported for protocol schemes

*假设服务器端发送数据的地址是:http://localhost:5000/students

*假设发送请求端的地址是:http://localhost:8080

1.配置代理服务器:

在根目录下创建vue.config.js,在vue.config.js中写入配置代理服务器的代码

module.exports = {
    //配置代理服务器
    devServer: {
      proxy: 'http://localhost:5000'
    }
  }

配置代理服务器时,写入服务器端发送数据的协议名、主机名、端口号,即:http://localhost:5000

2.发送axios请求:

//axios发送请求,请求之后返回promise值
      axios.get('http://localhost:8080/students').then(
        //请求之后给两个回调,成功的回调和失败的回调

        //成功执行:
        response=>{
          //成功之后返回来的response是响应对象,要获取值用response.data
          console.log('请求成功了,获取到了数据:',response.data)
        },
        //失败执行:
        error=>{
          //获取失败的原因用error.message
          console.log("请求失败了,失败的原因是:",error.message)
        }
      )

发送请求的地址,由原本的http://localhost:5000/students,因配置了代理服务器,变为http://localhost:8080/students

3.报错原因:跨域问题,服务器端和发送请求端的协议名、主机名、端口号必须一致,协议名http,主机名localhost,端口号前者为5000,后者为8080,因此需要配置代理服务器

4.代理服务器的原理:代理服务器配置成功后,其端口号为8080,发送请求端和服务器端都与代理服务器交互信息

***配置成功后必须重启脚手架***

你可能感兴趣的:(报错,服务器,运维,vue,前端,ajax)