开发环境

配置服务器代理

在项目根目录下新增一个文件 vue.config.js
详细文档参见： https://cli.vuejs.org/config/#devserver-proxy

module.exports = {

  devServer: {
    proxy: {

      '/api': {
        target: `http://localhost:8081/api`,
        changeOrigin: true,
        pathRewrite: {
          '^/api' : ''
        }
      }
    }
  }

}

以上配置，所有Axios中调用的url中的 /api会被匹配成为 http://localhost:8081/api

引入Axios并使用

import Axios from 'axios'


// 添加分类提交
submitAddTag(){
let api = '/api/tag'
let params = qs.stringify({
tname: this.tagForm.tname,
})
Axios.post(api, params).then((response) =>{
this.websites = response.data.result;
})

this.isAddTag = false;
this.dialogTagVisible = false;
this.$message('添加新网站成功')
},

在这个js中，它认为自己访问的是 /api/tag,并没有跨域 。 但实际上，它访问 /api/tag的地方是一个代理。实际又被转发给 http://localhost:8081/api/tag,

项目上线Ngix环境

将项目打包发布到线上，那个代理设置是不生效的。那个是npm服务器做的转发。纯静态网站没有代理转发功能。所以这里，需要设置Ngix反向代理。使得服务端中的请求被代理到新地方。此时服务端以为自己访问的是本地内容。

项目中的url api/tag。会被认为是项目的域名 + api/tag

而当前域名下的api/tag会被认为是一个文件夹。自然会找不到。

ngix配置摘取

location /api {
  proxy_pass   http://127.0.0.1:8081/api;
}

这相当于虚拟新增加一个位置 当前域名 + /api。这样无论是谁访问这个位置，都可以得到结果。而且该静态js还认为自己访问的是本地资源。