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

桃桃tao

已于 2022-03-09 08:42:18 修改

阅读量1.9k

点赞数

分类专栏：报错文章标签：服务器运维 vue 前端 ajax

于 2022-03-08 14:51:08 首次发布

本文链接：https://blog.csdn.net/weixin_47687315/article/details/123349568

版权

报错专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中配置代理服务器解决跨域问题。通过在vue.config.js中设置devServer的proxy属性，将http://localhost:5000作为目标服务器地址，使得前端http://localhost:8080端口的axios请求能够顺利发送到服务器。当遇到跨域错误时，配置代理服务器可以实现两端的通信。记得在配置完成后重启Vue脚手架使改动生效。

摘要由CSDN通过智能技术生成

*假设服务器端发送数据的地址是：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，发送请求端和服务器端都与代理服务器交互信息

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