Vue配置代理 解决跨域

 方法一

在vue.config.js中添加如下配置: devServer:{   proxy:"http://localhost:5000" }

说明: 1. 优点:配置简单,请求资源时直接发给前端(8080)即可。

2. 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。

3. 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)

 方法二 编写vue.config.js配置具体代理规则:

module.exports = {  

devServer: {      

proxy: {       '/api1': {// 匹配所有以 '/api1'开头的请求路径        

target: 'http://localhost:5000',// 代理目标的基础路径      

changeOrigin: true,      

pathRewrite: {'^/api1': ''}

},    

'/api2': {// 匹配所有以 '/api2'开头的请求路径      

target: 'http://localhost:5001',// 代理目标的基础路径  

changeOrigin: true,    

pathRewrite: {'^/api2': ''}}}}

} /*  

changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000  

changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080

changeOrigin默认值为true */

说明: 1. 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。

2. 缺点:配置略微繁琐,请求资源时必须加前缀。

作者:超级魔鬼筋肉人

链接:https://juejin.cn/post/7076429264018964488/

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前言 跨域问题可以说是前后端分离项目中经常面对的问题,事实上解决跨域问题的方法也有很多种,本篇文章将针对React...
    moutory阅读 6,109评论 0 1
  • 事实上,3以上的版本安装好以后没有主配置文件,它不像2的版本有专门的config文件夹可以处理配置,所以我们需要新...
    弦生_a3a3阅读 328评论 0 0
  • vue-cli3脚手架创建完毕不会有config文件,需要我们自己配置,并且官网有详细的配置列表。 在根目录下创建...
    雾里看花_5b5b阅读 786评论 0 0
  • 笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico...
    关航_强化班阅读 279评论 0 0
  • #vue2笔记 ##脚手架文件结构 ├──node_modules ├──public │├──favicon.i...
    Daydream_许多阅读 499评论 0 0

友情链接更多精彩内容