[JavaScript知识库]配置代理实现ajax请求跨域问题

vue 中发送 ajax 请求一般使用 axios ，发送请求时可能被请求的服务器和当前浏览器之间存在跨域问题

• 同源：协议，域名，端口号都要一样
• 跨域：违背同源策略
• 解决办法：
  1.cors（服务器中加特殊响应头）
  2.jsonp（借助script标签中的src）
  3.代理服务器

代理服务器

• 代理服务器和localhost端口一样（端口8080），发送请求就直接问代理服务器，代理服务器再发给服务器（假设端口5000）

开启代理服务器法一
1.vue.config.js文件中配置

module.exports ={
		//开启代理服务器
		devServer:{
			//假设原请求服务器端口为5000，这里是告诉代理服务器把请求转发给5000端口的服务器
			proxy: 'http://localhost:5000'
			}
		}

2.因为代理服务器和localhost端口一样，所以请求发给代理服务器

//原来直接请求端口为5000的服务器
//axios.get('http://localhost:5000/index1')
axios.get('http://localhost:8080/index1')

3.这种不能配置多个代理服务器，如果本身有资源代理服务器就不会把请求转发给服务器

开启代理服务器法二
1.vue.config.js文件配置

module.exports ={
		//开启代理服务器
		devServer:{
			//假设原请求服务器端口为5000，这里是告诉代理服务器把请求转发给5000端口的服务器
			proxy: {
				// 请求前缀，如果请求前缀是这个就转发
				'/api1':{
					//转发地址
					target:'http://localhost:5000',
					//
					pathRewite:{
						//代理服务器转发时要去除前缀
						'^/api1':''
							}
						}
				},
				//可配置多个代理
				'/api2':{
					...
					}
			}
	}

2.因为代理服务器和localhost端口一样，所以请求发给代理服务器

//端口号后面加上前缀
axios.get('http://localhost:8080/api1/index1')

注：每次修改配置文件( vue.congfig.js )后都要重新启动运行