黑马程序员技术交流社区

标题: 【成都校区】--- vue跨域解决 [打印本页]

---

作者: 小刀葛小伦    时间: 2020-4-3 14:20
标题: 【成都校区】--- vue跨域解决

开发模式

要知道，跨域这个行为是浏览器禁止的，但是服务端并不禁止。使用proxyTable的原理就是将域名发送给本地的服务器，再由本地的服务器去请求真正的服务器。

打开config/index.js，修改dev里的proxyTable

[JavaScript] 纯文本查看 复制代码

proxyTable:{



    '/': {



            target: 'http://www.xxx.cn/api', //你要访问的服务器域名



            changeOrigin: true, //允许跨域



            pathRewrite: {



                '^/': ''



            }



        }



}

当你在别的页面请求时只要是/，你只需要/xx/xxx 它就会帮你处理成 http://www.xxx.cn/xx/xxx。

假如项目需要请求两个不同的域名，proxytable在上面的基础上再增加，当请求时/json/xx/xxx开头的最后都会转换成http://www.aaa.cn/xx/xxx

[JavaFX] 纯文本查看 复制代码

'/json': {



            target: 'http://www.aaa.cn/', //你要访问的服务器域名



            changeOrigin: true, //允许跨域



            pathRewrite: {



                '^/json': ''



            }



        }

但实际上接口是没有json的，这只是你用来区分请求的一个别名，这时pathRewrite就可以将/json去掉

生产环境

找到config/pro.env.js

[JavaScript] 纯文本查看 复制代码

module.exports = {



  NODE_ENV: '"production"',



  API_ROOT: '"http://www.xxx.cn/"'



}

在config目录下新建api.js文件

const root = process.env.API_ROOT; //在开发模式下为会调用代理

export const getList = root + '/list'

这样配置后你可以直接在组件写请求的url不需再判断处于哪个模式下，都可以跨域请求

---

作者: 失落    时间: 2020-4-6 13:59
哇哦哇哦哇哦哇哦哇哦哇哦哇哦

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2