vue前端项目解决跨域

小白一枚。今天把项目交给甲方，甲方发来一张图片要求在前端代码配置跨域。所以针对代码内容查了一些关于跨域的文章和视频，把自己的理解和记忆在这里以文章的形式记录一下，如果有什么不妥的地方，还请多多指教。

什么是跨域？通俗的说就是在浏览器里面，如果域名、协议、端口号、ip地址有任何一项不同就是跨域。同样跨域针对的也是浏览器之间，在服务器之间发送请求就不存在跨域的问题。所以解决思路是：由客户端（浏览器）直接向服务器发送请求会存在跨域的问题，服务器不允许陌生来源访问，就返回了错误的信息。所以先由我们的客户端向本地自己的模拟服务器（代理服务器）发送请求，再由模拟服务器向目标服务器发送请求。

处理跨域的方法有三种：Jsop（引入script标签，只能处理get请求），cors（后端开启），代理服务器（前端常用）。

module.exports = {
  dev: {
    host: 'localhost',//本地的域名
    port: 8080,//自己的端口号
    proxyTable: {
      '/api': {  //拦截以api开头的接口的请求
        target: 'http://localhost:3000',// 拦截之后指向的要跨域的域名
        changeOrigin: true, // 是否开启跨域
      },
      '/get': {
        target: 'http://localhost:3000',// 要跨域的域名
        changeOrigin: true, // 是否开启跨域
      }
    }
  }
}

项目上线之后前端项目与后端数据库一起放在一起，开启一个服务器就不存在跨域问题。或者通过nginx来解决。

甲方给的代码就是再index.js里面配置如上类似的代码块，但是我搜的一篇教程里面感觉更准确一些。blog.csdn.net/weixin_4874… 因为我的axios.defaults.baseURL= ‘http://xxxx’ 没有相应的/api开头的接口，客户端发送请求的时候，找不到要拦截替换的/api，就没有办法重写路径。这个/api相当于是接口实际请求的前缀，代理了我的实际接口的前缀的公共部分 （但是小白不知道自己的理解有没有错误，先按甲方的要求写）。www.jianshu.com/p/f47b6bd23…