axios请求与proxy代理配置

       如果是不考虑跨域问题,那么请求后台数据使用的就是该路径。但是根据同源策略,3000端口(前端页面端口)无法访问5000端口(后台数据端口),此时就需要使用proxy代理配置了。 

/**
* 获取所有的用户信息
*/
getUserData = () => {
    axios.get('http://localhost:5000/users').then(
        res => { 
            console.log(res.data) 
        },
        err => { 
            console.log(err) 
        }
    )

}

     在src文件夹中新建文件setupProxy.js添加配置,项目进行启动的时候会自动遍历到这个文件并加入webpack中。

const proxy = require('http-proxy-middleware')

module.exports = function(app){
	app.use(
		proxy('/api',{                        //遇见/api前缀的请求,就会触发该代理配置
			target:'http://localhost:5000',   //请求转发给谁
			
            // 如果没有手动设置为true,该属性默认为false
            // 在本文中false状态下服务端获取到的Host请求来自于3000端口
            // true状态下Host请求来自于5000端口
            // 成功欺骗到了服务器 :)
            changeOrigin:true,                //控制服务器收到的请求头中Host的值
            
            // 在请求路径中加上了/api的路径触发代理    
            // 但是在后端访问路径中没有/api/xxx的说法
            // 所以需要在请求触发后将/api的路径删掉即改为空字符串
			pathRewrite:{'^/api1':''}         //重写请求路径
		}),

        // 在use中可以设置多个proxy代理
        proxy('/api2',{ 
            xxxx 
        }),
        proxy('/api3',{ 
            xxxx 
        })
    )
}

 分析:

首先还是简要介绍下代理配置的实现原理 

axios请求与proxy代理配置_第1张图片

     如果没有代理,客户端可以向服务端发起请求,但是根据同源策略无法接收到返回的数据,最后导致数据请求失败。

     其实代理可以理解为3000端口的中间商,注意,和客户端一样也是开在3000端口。该端口既开着一个脚手架的终端提供前台编写,同时也开着一个非常微小的服务器。因此客户端直接将请求发送给代理,代理直接将请求转发给服务端(服务器之间数据的获取不会受到跨域影响,产生跨域问题的本质是ajax引擎拦截了响应),因此服务端直接将数据返回给了代理。最后端口同为3000的代理可以成功将数据返回给客户端。

接下来讨论具体的配置以及路径设置方法 

    在添加了代理后,所有向3000端口中发送的【本地没有的资源】请求都会转发给5000端口,因此我们可以将请求路径做一个修改,改为’http://localhost:3000/api/users‘。需要注意这句话里的黑体内容,如果请求路径是’http://localhost:3000/api/index.html‘,返回的结果就会是public目录下的index.html文件,代理只会转发【本地public文件夹中没有的资源】

--------------------------更新---------------------------------

现在好像会出现proxy is not a function的报错

应该是版本更新问题,将proxy替换为createProxyMiddleware即可

你可能感兴趣的:(ajax跨域问题)