Proxy代理解决跨域

跨域

端口，域名，协议有一个不同就会造成跨域

Proxy跨域原理

浏览器会因为同源策略跨域，但服务端不禁止，npm run dev 本来就是运行了服务器，所有利用服务器发送请求即可（将所有请求转发到自己的node服务器然后发送请求 即 代理）

Proxy跨域配置

1. 安装插件
   npm install --save-dev http-proxy-middleware
2. 在最外层建立 vue.config.js 文件

 module.exports = {
	devServer: {
		proxy:{
			'/api': {
				target: 'http:www.xxx.com',
          		changeOrigin: true,
          		pathRewrite: {
            		'^/api': ''
          		}
			}
		}
	}
}

3. 调用接口

import axios form 'axios'
export default {
	data() {
		return{}
	},
	created() {
		axios
			.get(`/api/data`)	//调用http://www.xxx.com/data
			.then((res) => {
				console.log(res.data)
			})
	}
}