跨域问题的三种解决方法(vue)

1.CROS 服务端 设置请求头

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

2.利用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: ''
      // }
    }
  }
})

你可能感兴趣的:(vue.js,javascript,前端)