VueCli4项目配置反向代理proxy的方法步骤

Vue Cli4创建项目之后，没有配置vue.config.js，如果直接发起axios请求，可能会引起跨域问题.

以豆瓣电影首页的最近热门 为例：

axios({
  method: "get",
  url: "https://movie.douban.com/j/search_subjects",
  params: {
  type: "movie",
  tag: "热门",
  page_limit: 50,
  page_start: 0
  }
 }).then(res => {
  console.log(res.data);
 });

如果直接发起请求必然会引起跨域错误，只需要在项目根目录手动创建vue.config.js文件：

module.exports = {
 devServer: {
 proxy: {
  "/j": {
  target: "https://movie.douban.com",
  changeOrigin: true
  }
 }
 }
};

然后修改axios请求的url地址：

url:"/j/search_subjects"

最后 重启该项目 重启该项目 重启该项目 即可

到此这篇关于VueCli4项目配置反向代理proxy的方法步骤的文章就介绍到这了,更多相关VueCli4反向代理proxy内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue-CLI3.x 设置反向代理的方法

    最近在项目中使用了Vue CLI 3.0版本,项目中需要设置反向代理解决跨域问题,下面记录一下设置过程. 如何安装vue-cli3呢? 首先,你要有一个nodejs环境 Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 其次,如果你之前安装了vue-cli的旧版本,那么你要做如下操作 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue

  • Apache虚拟目录配置及vue-cli反向代理的设置方法

    配置需求来自于前后端分离.后台由于使用PHP或者Java,但是前端使用vue,React这些框架时怎么和后端有效的数据通信.反向代理是个很好的选择,虽然jsonp也可以,单并不好玩. Apache配置虚拟目录 -实际上线项目需要通过域名来访问,比如http://www.xxx.com,但在本机上如何配置虚拟域名来访问本机的项目呢? 1.找到C:\Windows\System32\drivers\etc\hosts这个文件添加以下格式内容 127.0.0.1 www.mytest.com //你的

  • 详解vue-cli构建项目反向代理配置

    详解vue-cli构建项目反向代理配置

    本文介绍了vue-cli构建项目反向代理配置,分享给大家,具体如下: proxyTable: {//配置请求代理 '/dlsys':{ target:'http://192.168.16.209:81', changeOrigin:true, pathRewrith:{ '^/dlsys': '/dlsys' } }, '/dlapi':{ target:'http://192.168.16.209:81', changeOrigin:true, pathRewrith:{ '^/dlapi':

  • VueCli4项目配置反向代理proxy的方法步骤

    Vue Cli4创建项目之后,没有配置vue.config.js,如果直接发起axios请求,可能会引起跨域问题. 以豆瓣电影首页的最近热门 为例: axios({ method: "get", url: "https://movie.douban.com/j/search_subjects", params: { type: "movie", tag: "热门", page_limit: 50, page_start: 0

  • 用IIS配置反向代理实现方法(图文)

    用IIS配置反向代理实现方法(图文)

    目标服务器:targetServer 配置反向代理的服务器:reveseProxServer iis应该是iis7及以上版本,才可以. 1.确定最终访问的网址:比如www.baidu.com  .www.jb51.net等等. 当然你也可以自己在targetServer部署自己的程序,在此为了示范,我在targetServer上部署了2个,用的8088端口,程序分别是: http://targetServer:8088/Auditsys/Default.htm http://targetServ

  • 在IIS7中应用Application Request Routing配置反向代理的图文教程

    在IIS7中应用Application Request Routing配置反向代理的图文教程

    在配置web服务器的时候,我们经常遇到这样的问题,由于某些原因,该服务器只能拥有一个公网IP,但是可能需要提供其他机器或者本机上其他webserver的服务器给访问者,同时又不希望使用其他端口,如果在linux下,常见的解决方案是使用nginx作为前端server,通过反向代理间接访问其他webserver.在IIS7之前,在windows上要实现该功能却不是一件容易的事情,但是在IIS7上,通过Application Request Routing模块,我们可以轻松实现反向代理. 本次测试配置

  • 本地通过nginx配置反向代理的全过程记录

    本地通过nginx配置反向代理的全过程记录

    前言 Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能.我们在日常开发中使用到Nginx的主要有以下几个场景: Nginx作为http服务器 跨域请求 负载均衡 网络资源的动静分离 作为前端,我们主要是关注前两个场景 一.下载安装 点此下载 ,下载完成后解压,解压后文件如下: 解压(双击nginx.exe,双击后一个黑色的弹窗一闪而过) 找到nginx解压目录下,鼠标右键,找到git bash打开,输入命令start ./nginx.exe回

  • JS跨域解决方案react配置反向代理

    JS跨域解决方案react配置反向代理

    跨域解决方案   jsonp(模拟get) CORS(跨域资源共享) 代理 iframe postMessage window.name WebSocket react的代理实现跨域 在配置在src/setupProxy.js文件,并通过npm安装http-proxy-middleware,代理中间件模块 创建 src/setupProxy.js 安装模块 npm i -S http-proxy-middleware    const {createProxyMiddleware: proxy}

  • Docker部署Nginx并配置反向代理

    Docker部署Nginx并配置反向代理

    准备工作 在docker内部署任何应用,都需要先下载对应的镜像:下载镜像之前,需要先搜索镜像来确认该镜像是否存在: docker search nginx 从列表可以看到,docker已经有了nginx的镜像,名称是“nginx”,接下来下载镜像: docker pull nginx 下载完成后,查看一下本地镜像: 如果在列表中看到nginx,镜像下载就已经成功了. 容器设置 在docker中,真正运行的是容器,镜像在我理解中是一种环境.我们在指定的镜像中运行某个容器,然后编辑和配置这个容器,从

  • vue-cli创建的项目,配置多页面的实现方法

    vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂 假设要新建的页面是rule,以下以rule为例 创建新的html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d

  • SpringBoot项目中使用redis缓存的方法步骤

    本文介绍了SpringBoot项目中使用redis缓存的方法步骤,分享给大家,具体如下: Spring Data Redis为我们封装了Redis客户端的各种操作,简化使用. - 当Redis当做数据库或者消息队列来操作时,我们一般使用RedisTemplate来操作 - 当Redis作为缓存使用时,我们可以将它作为Spring Cache的实现,直接通过注解使用 1.概述 在应用中有效的利用redis缓存可以很好的提升系统性能,特别是对于查询操作,可以有效的减少数据库压力. 具体的代码参照该

  • vs2019永久配置opencv开发环境的方法步骤

    有很多同学肯定想学习opencv相关的知识,但是有些情况下每建一次项目都要重新引入下各种文件是不是很苦恼,所以我也面临了这个问题,在网上看到很多的同学的方法,有的也都是很一样的,将什么.dll加入环境变量,然后设置项目配置文件什么的,这些东西我也尝试过,但是很容易忘记,我也特意写了一些笔记,但是有时还是会忘记.恰巧我也升级了vs2019,所以也打算更新下方法,做到一劳永逸.下面是教程部分.首先我们要安装好我们的opencv,然后我们安装以后会看到生成的文件夹.如图 这一切就是基础文件,所以这个务

  • vue项目配置使用flow类型检查的步骤

    你是否经常在debug那些简单可避免的bug?可能你给函数传参的时候搞错了参数的顺序,或者本来应该传个Number类型的参数,你传了一个String类型?JavaScript的弱类型是这一类bug的罪魁祸首,静态类型语言中不存在此类bug.Flow就是JavaScript的静态类型检查工具,该库的目标在于检查JavaScript中的类型错误,开发者通常不需要修改代码即可使用,故使用成本很低.同时,它也提供额外语法支持,使得开发者能更大程度地发挥Flow的作用. 一.flow的安装 flow可以直

随机推荐