初识vue（13）—— 解决 vue 跨域问题

当我们请求一个接口的时候，出现下图所示情况，说明请求跨域。

那么如何解决跨域问题呢？

用 vue 脚手架创建好项目后，可以在 vue 项目根目录下找到 config 文件夹，然后找到该文件夹下的 index.js 文件，最后找到下图所示位置的 proxyTable: {} 代码：

在该处加入以下代码：

proxyTable: {
  '/api': { // 匹配所有以 '/api'开头的请求路径
    target: 'http://localhost:4000', // 应该在这里填写自己项目真实的后台接口
    changeOrigin: true, // 支持跨域
    pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
      '^/api': ''
    }
  }
},

在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器再由本地的服务器去请求真正的服务器。

之后在发请求的时候，在接口前加上 ‘/api’ 即可。

如以下示例：

这里是我对 ajax 进行了封装，如上图所示，在接口前加个 ‘/api’ 即可。