vue开发时,跨域问题解决方法
2020-09-21 10:40 _天枢 阅读(503) 评论(0) 编辑 收藏 举报问题:vue开发时,跨域问题解决方法
解决:做个代理转发即可
具体步骤:
1.vue环境 config下index.js文件 如下标红的设置转发代码
/api:,每个前端访问,自动加上/api
target:用来转发,后端访问地址,端口。
pathRewrite: 重写了访问url,即前端访问url中带/api/xxx,请求到后端,自动把这个/api去掉,否则后端访问不到。
// see http://vuejs-templates.github.io/webpack for documentation. var path = require('path') module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }, dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://127.0.0.1:5000/', //目标接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '' //重写接口 } } }, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false }, configureWebpack: { } }
以上设置好之后,npm run dev启动时,自动会启动这个转发代理。很好的解决了跨域问题。
作 者:
天枢
出 处:
http://www.cnblogs.com/yhleng/
关于作者:专注于软件自动化测试领域。如有问题或建议,请多多赐教!
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
特此声明:所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误,共同进步。或者
直接私信我
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角
【
推荐】
一下。您的鼓励是作者坚持原创和持续写作的最大动力!