vue服务器代理proxyTable配置解决跨域

目录

1、Proxy代理作用

2 、常见情况

3、应用方式

4、具体配置实例 

5、配置思路

 代理原理

 总结



1、Proxy代理作用

proxy代理作用:前端服务器代理的作用是,告诉服务器任何未知请求(没有匹配到静态文件的请求),代理到一个另一个地址,从而解决跨域的问题。

2 、常见情况

前端在向后端进行资源请求的时候,后端若没有使用Cros中间件,则会出现跨域问题,解决问题的办法之一就是前端使用Proxy进行服务器代理。

3、应用方式

在使用vue-cli2创建的vue项目时,在config文件夹下的index.js文件中,可以在dev相关配置信息中的proxyTable里对一个或者多个服务器进行代理。

vue服务器代理proxyTable配置解决跨域_第1张图片

 注:

proxyTable是vue-cli提供解决vue开发环境下跨域的方法,proxyTable的底层使用了http-proxy-middleware,他是http代理中间件,他依赖node.js,基本原理是用服务器代理解决跨域浏览器跨域。有时候在开发的时候,我们请求的后代接口和vue不在同一个域名产生了跨域,而后台服务器并未开启cors,这个时候需要配置proxyTable解决跨域问题。

4、具体配置实例 

proxyTable:{
  //'api'就等于target,在链接里访问/api等同于http:/182.xx.xx.xx:8888/
'/api':{
target:'http://182.xx.xx.xxx:8888/',     //服务器的接口地址
secure:true,                           //如果是https,需要开启这个选项
changeOrigin:ture,                    //是否跨域请求?ture
pathRewrite:{
  '/^api':'api/' 
                    //如果真实接口里包含了/api,就需要这样配置
                    //等价于/^api=/api+api==http://182.xx.xx.xxx:8888/api
}
}
}

5、配置思路

    在某次网络请求完整路径为  '/api/ynai/static/ai/'的时候,出现了跨域的问题,之后需要再前端对该网络请求进行一次服务器代理

具体配置如下:

①首先代理标志名,必须与请求路径中头部一致,示例代码如下:proxyTable:{ '/api' : { } }

②配置target参数,确定请求代理的服务器根路径,代码示例如下:

vue服务器代理proxyTable配置解决跨域_第2张图片

 ③根据需要确定ws(websocket代理)的布尔值

vue服务器代理proxyTable配置解决跨域_第3张图片

 ④配置changeOrigin,赋值为ture,允许跨域

vue服务器代理proxyTable配置解决跨域_第4张图片

 ⑤根据需要配置pathRewrite参数

若最终代理后的路径中不需要/api,那么需要配置pathRewrite的参数对路径进行重写为 ' '

vue服务器代理proxyTable配置解决跨域_第5张图片

 代理原理:

假设有如下代理配置:

vue服务器代理proxyTable配置解决跨域_第6张图片

则:

1、发生网络请求时,代理配置文件会去正则匹配网络请求路径,是否与代理匹配(比如发生的请求为/aaa/static/ai/,代理配置了 '/aaa ',则匹配成功)

2、匹配成功后,代理配置生效,他将会请求/aaa/static/ai/,经过代理配置指定的方式处理,最后拼接到target指向的服务器根路径(http://www.baidu.com/)后面

3、最终形成完整的请求路径(http://www.baidu.com/static/ai),跨域问题也得以解决

 总结:

前端进行服务器代理配置的视乎,必须保证代理配置文件能够匹配到axious请求的url,才能正确的将target指向的服务器地址与url拼接得到完整的跨域请求路径,进而才能够请求到远端的资源。

你可能感兴趣的:(服务器,r语言,p2p)