http-proxy 代理跨域

1. cors:

   1. 优点：仅服务器端修改
   2. 缺点：必须知道客户端具体的 ip 地址
      千万不要使用 * ，具体的请求 url : http:localhost:8080/

   服务器端：

   3. 安装： npm install cors --save

   4. 导入：app.js 中导入

      const cors = require("cors")
      		app.use(cors({
      			orgin:[
      				// 允许跨域的客户端源头
      				'http:localhost:8080/' ,'http:localhost:8081/' ,'....'
      			],
      			credenitals:true // 要求允许携带 cookie
      		}))
      

2. JSONP

   1. 优点：不需要知道客户端具体的ip地址
   2. 缺点：需要客户端和服务端一起调整
   3. **如果服务器端觉得 cors 也不好用，JSONP 也不好用，就不会做跨域（很多服务器是不会给你做跨域的，因为别人的服务器在上线后，就在自己的服务器上请求服务器，所以不会有跨域问题），开发中没有人去给你解决跨域问题 **

3. 前端实现跨域：

   1. 利用vue 脚手架中自带的 http-proxy 代理程序进行跨域
   2. 在vue 脚手架中配置文件（vue.config.js），添加一个新的配置项

// vue.config.js
module.exports = {
	devServer:{
		proxy:{
			//为所有的服务器接口起一个别名前缀，为了和vue脚手架中其他页面的路由地址区分
			'/api':{
				target:'http://localhost:3000/'//自己的服务器端口3000
				changeOrigin:true //打开跨域
				pathRewrite:{
					"^/api":""
					//因为真实的服务器端的地址中不包含/api ，所以应该将程序中的、api删除（替换空字符串），再和target中的基础路径拼接起来作为发送到服务器端的最终请求地址
				}
			}
		}
	}
}
//main.js
axios.defalts.baseURL = "/api"
// 然后重启脚手架（记得打开服务器）