Skip to main content

vite 解决跨域问题

正常来说， javascript在浏览器中是无法发送跨域请求的，所以我们需要在vuejs的＂开发服务器＂上做 个转发配置．

修改： config/index.js文件，增加下列内容：

module.exports = {
  dev: {
    proxyTable: {
      '/api': {        // 1. 对于所有以  "/api"　开头的url 做处理．
        target: '<http://siwei.me>',   // 3. 转发到 siwei.me 上．
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''  // 2. 把url中的　"/api" 去掉．
        }
      }
    },
}

上面的代码做了三件事：

  1. 对于所有以 "/api"　开头的url 做处理．
  2. 把url中的　"/api" 去掉．
  3. 把新的url 请求打到　siwei.me 上．

例如：

注意：　以上的代理服务器内容，只能在＂开发模式＂下才能使用．在生产模式下，只能靠服务器的nginx的 特性来解决js跨域问题．

我们发现，在export代码段中，有两个部分：

<script>
export default {
  data () { },
  mounted() { }
}
</script>

实际上，上面代码中，

  • data方法，是用于＂声明页面会出现的变量＂，并且赋予初识值.(非常重要，切记这一点)
  • mounted 表示页面被vue渲染好之后的钩子方法，会立刻执行．
 mounted() {
    this.$http.get('api/interface/blogs/all').then((response) => {
       this.blogs = response.body.blogs
    }, (response) => {
       console.error(response)
    });
  }

上面代码中：

  • this.$http 中的
  • this 表示当前的vue组件（也即 BookList.vue)
  • $http 所有以 $开头的变量，都是vue的特殊变量，往往是vue框架自带． 这里的$http就是可以发起http 请求的对象.
  • $http.get 是一个方法，可以发起get 请求．　只有一个参数就是目标url,
  • then() 方法，来自于promise, 可以把异步的请求写成普通的非异步形式． 第1个参数是成功后的callback, 第2个参数是失败后的callback．
  • this.blogs = response.body.blogs 中，是把远程返回的结果（json ），赋予到本地．　由于javascript 的语言特性，能直接支持json ，所以才可以这样写．