配置代理的两种方法

配置代理方式一

什么是ajax跨域

发送请求的浏览器与服务器的协议名、主机名、端口号应该保持一致，不一致则为跨域

配置代理步骤

1. 在vue.configs.js中开启代理服务器

   devServer:{
   	proxy : '服务器地址'
   }
   

2. 在需要用到的地方发送请求(先下载axios,npm i axios)

   axios.get('代理服务器地址/文件').then(
   	response => { console.log('请求成功',文件.data) },
   	error => { console.log('请求失败',error.message )}
   )
   

服务器和代理服务器之间的联系

代理服务器和发送请求的服务器端口是相同的

注意

• public文件夹中的文件是该服务器上的文件
  如果请求的文件在代理服务器中原本就有，则代理服务器不会去请求其他端口的服务器
• 代理服务器只能请求一台服务器，如果请求了端口号为5000的服务器，则无法再请求其他服务器了

配置代理方式二

步骤与一相似
在vue.config.js中

  devServer: {
   	 proxy: {
		//api1是前缀名，如果请求时加上了前缀名，说明需要使用代理服务器来请求其他服务器(前缀名写在端口号后面)
		'/api1':{
		    target:'url',//基础路径,比如：http://localhost:5000
		//正则表达式，把路径中的/api1替换成空字符串
		    pathRewrite('^/api1':''),
		//欺骗服务器，设置为true时，服务器收到的请求头中的host为：localhost:5000,也就是存有数据的服务器端口而非代理服务器本身,默认值为true
		    changeOrigin:true
			}
	  	 }
   	    }

	    changeOrigin:true
		}
  	 }
    }