本人纯前端新手。

AboutView.vue的代码如下

<template>
  <div class="about">
    <h1 @click="handleClick">This is an about page</h1>
    {{theName}}
  </div>
</template>

<script>
import {toRefs} from 'vue';
import {useStore} from 'vuex';
import axios from 'axios'
export default {
  setup() {
    axios.get("http://www.nuanwan.com/api/user/register.json").then((response)=>{
      console.log(response)
    })

    const theStore = useStore();
    // const theName = theStore.state.name;
    const theName = toRefs(theStore.state).name
    const handleClick = () => {
      theStore.dispatch('myChange', '999')
    }
    return {
      theName,handleClick
    }
  }
}
</script>

自己尝试解决跨域问题：在vue.config.js中做了如下配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy :{
      '/' :{
        target:'http://www.nuanwan.com',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api':''
        }
      }
    }
  }
})

结果访问还是报错。

请问老师，该如何正确配置。我翻遍了本节的问答，也没有找到解决方案。
第二个问题，为什么我这么配置了，控制台会一直报 websocket 连接错误？