开发环境中跨域

使用vue-cli创建的项目，开发地址是localhost:8080，需要访问非本机上的接口http://192.168.0.112:8080/cms/queryMaterial。不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置，不过vue-cli创建的项目，可以直接利用node.js代理服务器，通过修改vue proxyTable接口实现跨域请求。在vue-cli项目中的config文件夹下的index.js配置文件中，修改前的dev：

dev: { assetsSubDirectory: 'static', //静态资源根目录的子目录static，也就是dist目录下面的static assetsPublicPath: '/', //编译发布的根目录，可配置为资源服务器域名或 CDN 域名 proxyTable: {}, //proxyTable 代理的接口（可跨域） host: 'localhost', port: 8080, //dev-server的端口号，可以自行更改 autoOpenBrowser: false, //是否自动打开浏览器 errorOverlay: true, notifyOnErrors: true, poll: false, useEslint: true, showEslintErrorsInOverlay: false, devtool: 'cheap-module-eval-source-map', cacheBusting: true, cssSourceMap: true //默认情况下，关闭 CSS Sourcemaps，因为使用相对路径会报错 },

只要修改里面的proxyTable: {}

proxyTable: { '/cms': { //代理地址 target: 'http://192.168.0.112:8080', //需要代理的地址 changeOrigin: true, //是否跨域 secure: false, pathRewrite: { '^/cms': '/cms' //本身的接口地址没有'/cms' 这种通用前缀，所以要rewrite，如果本身有则去掉(/cms等价于 /api"'}

2、在代码中调用设置好的参数：

比如我在本项目中重新封装axios(api文件在/src/axios/request.js中)，将配置好的接口地址作为baseURL拼接到接口路径中，应用参数部分如下：process.env.API_ROOT

最后重新启动项目就可以了，当npm run dev的时候就运行在生产环境，当npm run build的时候就是正式的线上环境。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。