跨域问题的三种解决方法（vue）

1.CROS 服务端 设置请求头

//设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*')

2.利用script标签支持跨域的属性 此方法需要服务端配合指定回调

<script>
    var body_=document.getElementsByTagName('body')[0];
    function search_(){
        var value_=q.value;
        if(value_.trim()==''){
            return;
        }
        var script_=document.createElement('script');//利用script标签之处跨域的属性
        script_.src='http://suggest.taobao.com/sug?code=utf-8&q=' + value_ + '&callback=cb';
        body_.appendChild(script_);
        console.log(script_);
    }
    function cb(res) {//回调函数
        console.log(res);
        // 数据渲染到页面
        var lis = ''
        for (var i = 0; i < res.result.length; i++) {
          lis += '<li>' + res.result[i][0] + '</li>'
        }
        console.log(lis)
        list.innerHTML = lis
      } 
</script>

3.代理服务器  通过vue-cli实现 配置vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //开启代理服务器方式一方便简洁
  //缺陷一次只能配置一个 且先会去public中去找
  //如果pubblic中有就不会转发请求了 容易出现问题
  // devServer: {
  //   proxy: 'http://localhost:5000'
  // }
  //开启代理服务器2
  devServer: {
    proxy: {
      //请求前缀是谁 如果请求前缀符合 下面就继续走
      //请求前缀紧跟端口号 写在axios里
      '/quan': {
        //请求的目标服务器
        target: 'http://localhost:5000',
        //路径过滤 正则替换空
        pathRewrite:{'^/quan':''},
        //用于支持webscoket
        ws: true,
        //服务器骗不骗另一个服务器自己从哪里来
        changeOrigin: true
      },
      // '/foo': {
      //   target: '<other_url>'
      // }
    }
  }
})