在学习vue中代理服务器的时候，出现载入页面时与 ws://192.168.43.89:8080/ws 的连接中断。

Question

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  // transpileDependencies: false
  transpileDependencies: true,
  lintOnSave: false, //关闭eslint检查

  // 开启代理服务器
  devServer:{
    port: 8080,
    proxy: 'http://localhost:5000',
    headers:{Connection: "keep-alive"}
  }
})

<template>
    <div >
       <button @click="getStudents">获取学生信息</button>
    </div>
</template>


<script>
   import axios from 'axios'


    export default {
        name:'App',
        methods:{
          getStudents(){
            // axios.get('http://localhost:5000/students').then(
            // 不要再找5000要数据了 我们开启了代理服务器 就找8080就行
            axios.get('http://localhost:8080/students').then(
                // 请求成功时的回调
                response =>{
                    // console.log('请求成功了',response)  如果想要成功后的数据，这样直接写response是不行的
                    // response只是一个响应对象  response.data 才是真正的data数据
                    console.log('请求成功了',response.data)
                },
                // 请求失败时的回调
                error =>{
                    // error.message  失败的原因
                    console.log('请求失败了',error.message)
                }
            )
          }
        }
       
   }
</script>

Answer 1

复制粘贴重启即可

devServer: {
proxy: { // 代理
'^/': {
ws: false ,// 在这里添加本代码,
target: 'http://localhost:5000',// 连接后端跨域配置跨域
changeOrigin: true,
secure: false,
}}}