Loading... ## 开发环境 ### 配置服务器代理 在项目根目录下新增一个文件 `vue.config.js` 详细文档参见： https://cli.vuejs.org/config/#devserver-proxy ```js module.exports = { devServer: { proxy: { '/api': { target: `http://localhost:8081/api`, changeOrigin: true, pathRewrite: { '^/api' : '' } } } } } ``` 以上配置，所有Axios中调用的url中的 `/api`会被匹配成为 `http://localhost:8081/api` ### 引入Axios并使用 ```js 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还认为自己访问的是本地资源。 最后修改：2020 年 09 月 02 日 05 : 16 PM © 允许规范转载
