如何vue跨域

什么是跨域？

跨域，指浏览器不能执行其他浏览器的脚本，他是由浏览器的同源策略造成的。是浏览器对javaScript实施的安全限制。

同源指，域名、协议、端口统一一致。

解决的方案：

对于使用vue的同学来讲，目前使用vue框架时，经常遇见跨域的问题，在项目时如果后端没有给我们解决跨域，就需要我们自己去配置跨域的文件。

在vue的根目录里新建 vue.config.js 文件，通过代理的方式解决跨域的问题，保存再启动项目即可。

//暴露对象
module.exports = {
  //服务器代理
  devServer: { 
    //代理
    proxy: {
      //配置名称
      '/api': {
        // 你要访问的目标地址
        target: 'http://127.0.0.1:8000/', 
       //允许跨域
        changeOrigin: true,
        //路径重写
        pathRewrite: {
          '^/api': '' // 需要重写的地址
        }
      }
    }
  }
}

//多路由域名的代理，复杂写法：
module.exports={
  devServer: {
        //代理
        proxy: {
            //配置名
            '/api': {
                //代理地址，目标服务器
                target: 'http://localhost:3000',
                changOrigin:true
            },
            '/captcha': {
                //代理地址，目标服务器
                target: 'http://localhost:3000'
            },
            '/register': {
                //代理地址，目标服务器
                target: 'http://localhost:3000'
            },
            '/login': {
                //代理地址，目标服务器
                target: 'http://localhost:3000'
            },

        }
    }
}

建议前端开发的小伙伴们，请求数据时配置一下config.js文件，有时后端人员忘记处理跨域了，我们也可以获取到数据请求。