Vue中使用axios 解决跨域问题:

Vue中使用axios 解决跨域问题

首先安装axios

比如你想请求 http://www.13124.com/aa/movie 这是一个会产生跨域的接口

脚手架4 vue cli4

在Vue 项目中创建一个vue.config.js

module.exports = {

	devServer: {
		open: true,
		host: "0.0.0.0",
		port: 3000,
		hotOnly: false,
		proxy: {
			'/api': {
				target: 'http://www.13124.com', //跨域的域名
				ws: true, // 代理 websockets
				changeOrigin: true, //是否开启跨域
				pathRewrite: {
					'^/api': '' // 重写地址
				}
			}

		}
	}

}

注意:每次修改配置文件你都应该重新编译 npm run serve / npm run dev (具体看你的运行方式了)

调用时:

axios({
	url: "aa/movie"  //使用时url会自动与重写的地址拼接,组成原始地址
}).then((res) => {
	console.log(res);
})

至此,成功解决

代码007普通

打赏 收藏 海报 链接