React中使用Axios及解决跨域问题

在学习React时重新过了一遍axios，其中涉及到promise方法

引入axios

import axios from 'axios';

axios请求正常写，post 和 put 要在参数中额外加请求体对象属性

		axios({
			method:'GET',
			url:'http://localhost:3000/api1/students'
		}).then(
			response => {console.log('成功',response.data);
			},
			error => {console.log('失败',error);
			}
		)

（api为代理相关）

解决跨域 在axios方法中url配置为本地url域名

单个端口的跨域：在package.json中 单独设置 "proxy": 目标端口url 

多个端口的跨域：

1）在src中新建一个setupProxy.js文件

2）在setupProxy.js文件中配置多个端口的代理

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app){
	app.use(
		createProxyMiddleware('/api1',{ //遇见/api1前缀的请求，就会触发该代理配置
			target:'http://localhost:5000', //请求转发给谁
			changeOrigin:true,//控制服务器收到的请求头中Host的值
			pathRewrite:{'^/api1':''} //重写请求路径(必须)
		}),
		createProxyMiddleware('/api2',{
			target:'http://localhost:5001', 
			changeOrigin:true,
			pathRewrite:{'^/api2':''}
		}),
	)
}

其中涉及版本问题 低版本中的 createProxyMiddleware 用 Proxy 代替

在axios方法中添加前缀（图中api/)，即可将请求发给代理，并由代理转发给目标端口，解决跨域

            changeOrigin:true,//控制服务器收到的请求头中Host的值

            pathRewrite:{'^/api1':''} //重写请求路径(必须)

这两个属性：

前者将欺骗服务端收到的路径

后者将欺骗浏览器收到的域名