Vue解决Axios跨域问题

提前声明：本文只针对使用vue-cli创建的vue项目，范围仅限于vue2

跨域

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制

解决跨域

话不多说，直接上代码：

1. 在项目根目录创建 vue.config.js 文件，该文件与 src 同级
2. 在 vue.config.js 文件中写下以下代码：

	module.exports = {
   
	  devServer: {
   
	    proxy: {
   
	      '/api': {
   
	        target: '这一块写的是后端的接口地址',
	        pathRewrite: {
   
	          '^/api': ''//重写,
	        },
	        changeOrigin: true//是否允许跨域
	      }
	    }
	  }
	}

上面代码是实现axios在vue中允许跨域

3. 全局配置 axios 使用方法：

  // 1. 安装axios
  npm i axios
  // 2. 在 main.js 中配置引入 axios
  import axios from 'axios'
  Vue