Vuecli2跨域问题解决：Access to XMLHttpRequest at‘httplocalhost

什么是跨域问题

当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域。
跨域是是因为浏览器的同源策略限制，是浏览器的一种安全机制，服务端之间是不存在跨域的。
我在写实验室项目的时候，后端给我提供的接口并没有挂载到服务器上，他用的是8001端口，但是我vue项目设置的端口是8081这也就出现了跨域问题

解决方法

1.在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域，在proxy中设置要访问的地址，并重写/api为空的字符串。下面是我vue.config.js中的代码

const {
    
     defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
    
  transpileDependencies: true,
  // const { defineConfig } = require('@vue/cli-service')
//在vue中使用proxy进行跨域的原理是：
//将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），
//再由本地的服务器去请求真正的服务器。
  devServer:{
    
    
    proxy:{
    
    
      '/api':{
    
    //表示拦截以/api开头的请求路径
        target:'http://localhost:8001',
        changOrigin: true,//是否开启跨域
        pathRewrite:{
    
    
          '^/api':'' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
        }
      }
    }
  }

})

2、在axios.create的时候将baseURL设置为api

//设置请求根路径
axios.defaults.baseURL = '/api'

现在调用后端接口发现可以成功调用了，解决