vue 中配置跨域问题

xiaoShengSanYue

已于 2022-07-22 09:55:25 修改

阅读量2.5k

点赞数 1

分类专栏： Vue 文章标签： vue 跨域

于 2021-08-25 17:28:52 首次发布

本文链接：https://blog.youkuaiyun.com/yehuaner33/article/details/119911357

版权

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了在Vue项目中如何配置vue.config.js实现本地开发时的跨域设置，通过设置代理将/api请求转发到指定目标URL。同时展示了使用axios进行API调用的示例，请求示例为获取广告列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目根目录下新建 vue.config.js 文件，并写入以下内容

module.exports = {
	devServer:{
		// 本地域名
	    host:'localhost',
	    // 本地端口
	    port:'8080',
	    open:true,
	    proxy:{ //配置跨域
	    	// 当访问到 api 开头的接口时走下面的内容
	        '/api':{
	        	// 最终想要访问的地址
	            target:'https://www.imooc.com',
	            changeOrigin:true,//允许跨域
	            pathRewrite:{
	                '^/api':''
	            }
	        }
	    }
	}
}

在 vue 中这样发送请求即可

this.axios.get('api/common/adver-getadverlistbymarking?marking=global_newcomer').then(res => {
	console.log(res);
})

最终访问的地址是 https://www.imooc.com/common/adver-getadverlistbymarking?marking=global_newcomer