Vue-cli proxyTable 解决开发环境的跨域问题

proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
pathRewrite: {
'^/list': '/list'
}
}
}

这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.
那么又是如何解决跨域问题的呢?其实在上面的'list'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。增加的代码如下所示:

proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
'^/list': '/list'
}
}
}

vue-cli的这个设置来自于其使用的插件http-proxy-middleware

重点:本地web 服务器不能占用vue  应用端口,否则代理不成功!

Vue-cli proxyTable 解决开发环境的跨域问题的更多相关文章

  1. 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题

    在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...

  2. Vue proxyTable 解决开发环境的跨域问题

    在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...

  3. 转:Vue-cli proxyTable 解决开发环境的跨域问题

    转:http://www.jianshu.com/p/95b2caf7e0da 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了 ...

  4. Vue-cli中的proxyTable解决开发环境的跨域问题

    https://blog.csdn.net/u012149969/article/details/80288126 https://vuejs-templates.github.io/webpack/ ...

  5. vue proxyTable代理 解决开发环境的跨域问题

    如果我们项目请求的地址为 htttp://xxxx.com/a/b/c 可以设置代理为: dev:{ assetsSubDirectory: 'static',// 静态资源文件夹 assetsPub ...

  6. Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题

    原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...

  7. vue开发环境配置跨域,一步到位

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...

  8. Vue---vue-cli 中的proxyTable解决开发环境中的跨域问题

    使用vue+vue-cli+axios+element-ui开发后台管理系统时,遇到一个问题,后台给了一个接口,我这边用axios请求数据,控制台总是报405错误和跨域错误 错误 405? 没见过!! ...

  9. 解决React前端在开发环境的跨域问题

    在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用Nginx来处理,那么,在本地开发环境又该如何处理呢? React框架里处理跨域问题,可以使用ht ...

随机推荐

  1. linux系统输入法设置

    首先是要安装了中文输入法,下面以搜狗为例. 2 从system settings 进入language support ,在keyboard input method system 中是看不到自己安装 ...

  2. 新唐M0 M4系统初始化

    系统初始化包含了时钟(clock)初始化和多功能引脚(Multi Function Pin 简称MFP寄存器)配置.void SYS_Init(void) { /* 解锁保护寄存器 */ SYS_Un ...

  3. EL表达式格式化日期时间

    1.首先引入标签库 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> ...

  4. 使用synchronized(非this对象)同步代码块解决脏读问题

    首先通过示例来学习验证多个线程调用同一个方法时随机的. package syn_out_asyn; import java.util.ArrayList; import java.util.List; ...

  5. java的bean和map互转的工具类

    import java.beans.BeanInfo;import java.beans.IntrospectionException;import java.beans.Introspector;i ...

  6. IIS7设置IP地址和域名限制

    在IIS中可以通过IP地址域名设置来控制拒绝或允许特定范围内的IP对网站的访问权限,下面简单介绍如何在IIS7.5中设置,如下图,是IIS7.5的主界面 一.安装“IP地址和域限制”功能 选定一个网站 ...

  7. 使用angular路由切换后 轮播以及iscrollJs失效的问题

    我们在使用angular的时候,路由总是最让人头疼的地方. 在这里为大家解决一些用angular来回切换遗留下的小问题 比如我们在使用ng-route时如果主页面含有轮播图,当你切换到其他页面再切回主 ...

  8. Oracle AWR之-enq: TX - allocate ITL entry

    今天收到压力测试期间awr报告,测试人员要我看看数据库是否有可以优化的地方,数据库服务器配置信息:CPU:32*8,内存:480g 单实例数据库:oracle 11.2.0.4.具体分析过程如下: 可 ...

  9. Linux下的pure-ftp的安装详解

    FTP(File Transfer Protocol)是文件传输协议,常用于Internet上控制文件的双向传输.同时,它也是一个应用程序,用户可以通过它把自己PC机与世界各地所运行FTP协议的服务器 ...

  10. 构建vue项目(vue 2.x)时的一些配置问题(持续更新)

    基于前文,使用vue-cli脚手架工具构建项目,并使用了webpack,那么我在项目中遇到的一些与配置相关的问题将在这里进行汇总. 1.代码检查问题 由于我们在构建项目时,使用了Eslint对我们的项 ...