怎么解决vue中的跨域问题？

1.什么是跨域？

发起页面的请求，与请求的服务器，协议，端口，域名，其中有一项不相同的，就会产生跨域问题。

2.跨域错误原因

请求是跨域的，并不一定会报错。普通的图片请求，css文件请求是不会报错的

出现跨域的条件：

浏览器同源策略+请求是ajax请求+请求确实跨域了

跨域错误的本质出在浏览器，是由于同源策略，不是出在服务器端，服务器是可以收到请求的

3.解决方案

目前比较流行的解决方案

1.前端用jsonp方式去发请求

2.后端开启cors  在响应中添加必要的响应头 ，让响应回来之后浏览器不在报错

3.代理转发

怎么解决vue项目中的跨域问题

在vue.config.js这个配置文件中，它有一项是devServer，它就是我们下边要操作的主角。

module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        '/api': {
          target: 'http://localhost:3000', // 我们要代理的真实接口地址
          // http://localhost:9588/api/login -> http://localhost:3000/api/login
            changeOrigin: true, 
          // 如果是false,后端到的请求中的host就是当前浏览器的host：localhost:9588
          // 如果是true, 后端收到的请求中的host就是target的值
          
          // 路径重写
          // 如果我们不光要使得域名修改,而且还需要改变其它路径,则需要做路径重写
          // 比如 我们想把api去掉  
          // http://localhost:9588/api/login -> http://localhost:3000/login
          pathRewrite: {
            '^/api': ''
          }
      }
    }
  }
}