Vue-cli解决前端跨域问题has been blocked by CORS policy

前言

解决前端跨域问题有三种方式可以实现:
1.CORS方式：
  这种方式一般和前端人员无关，需要后端人员在服务器中返回支持前端请求的相应头Access-Control-Allow-Origin，从而使得前端浏览器可以直接访问服务器。但是这种解决跨域的方式会导致任何前端都能访问到该服务器上的资源，因此存在较大的危险。
2.JSONP方式：
  JSONP解决跨域问题实际上不是一个官方所推出的方式，是程序员们为了解决跨域问题而设计出来的一种方法。其巧妙之处在于使用script标签通过CDN方式来引入需要访问的资源，从而不存在前端访问服务器的跨域问题。但是这种方式在开发中使用较少。
3.配置代理方式：
  在开发过程中，常见的解决前端跨域问题的方法是使用配置代理方式，其原理是：在前端资源的相同端口上开启一台服务器，从而前段能直接访问相同端口的服务器，前端的资源请求可以通过这台代理服务器而转发出去。而代理服务器和存储资源的服务器之间不存在跨域问题，因为服务器之间直接通过http请求访问即可。

推荐方式——配置代理方式

  配置代理方式也存在两种：其一是使用nginx反向代理方式，这种方式常见但是需要了解nginx相关知识；另一种是在Vue项目中使用vue-cli脚手架的方式来进行配置代理。我们在这使用Vue-cli方式进行配置代理服务器，十分简便好用。

vue.config.js代码如下：

module.exports = {
	//开启代理服务器（方式一）
	devServer: {
    proxy: 'http://localhost:5000'
  }, 
	//开启代理服务器（方式二）
	devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:5000',
				pathRewrite:{'^/atguigu':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
				pathRewrite:{'^/demo':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      }
    }
  }
}

发送资源请求的代码：

<template>
	<div>
		<button @click="getStudents">获取学生信息</button>
		<button @click="getCars">获取汽车信息</button>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name:'App',
		methods: {
			getStudents(){
				axios.get('http://localhost:8080/students').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			},
			getCars(){
				axios.get('http://localhost:8080/demo/cars').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
		},
	}
</script>

通过以上配置便可以将8080端口转接到5000和5001等等端口上去访问资源，并且不会产生跨域问题。