vue devserver proxy设置跨域详解

本文主要是介绍vue devserver proxy设置跨域详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

你要请求的线上域名

http://baidu.com

你要请求的线上接口

/news/list

拼接起来就是这样的

http://baidu.com/news/list

然后vue.config.js配置是这样的：

module.exports = { devServer: {   proxy: {   '/api': {    //这里的/api表示的意思是以/api开头的才生效 ->刷下面的重点target: "http://baidu.com",changOrigin: true,   //如果接口跨域这里就要这个参数配置pathRewrite: {//'^/api': '/api'  //实际请求地址是http://baidu.com/api/news/list'^/api': '/'  //实际请求地址是http://baidu.com/news/list// 我的理解就是http://baidu.com替换了/api/news/list里面的/api}}  
}

升级版：打印proxy代理地址：vue.config.js

  devServer: {proxy:{'/dev':{target: "https://baidu.com",changeOrigin: true,secure:false,onProxyReq: function(proxyReq, req, res) {const realUrl = proxyReq.protocol + '//' + proxyReq.host + proxyReq.pathconsole.log('Proxying real request url: ' + realUrl);}}},port: 8443,open: false,disableHostCheck: true,}

这篇关于vue devserver proxy设置跨域详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---