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. Maven(二)-- 搭建私服,上传jar

    一.在setting中配置 私服的镜像,在mirrors标签中加上: <!--第一步 配置私服的镜像--> <mirror> <!--此处配置所有的构建均从私有仓库中下载 ...

  2. windows命令之PING DIR DEL CD TASKLIST (转)

    最简单的莫过于PING命令了. PING命令的功能就是给对方主机发送IP数据包. 一般都是测试主机是否在线. 用法如下: PING 192.168.1.1.PING命令默认发送的是四个数据包,当然也可 ...

  3. Swift-Swift中的全局变量和函数的创建

    解决办法: 写OC的时候常常会用到各种宏定义,但是Swift中貌似没有宏的这种定义,更多的是通过全局常量或者全局函数来实现这一效果.我们只需要建立一个文件(假设为Macro.swift),把想用的定义 ...

  4. LeetCode——pow(x, n)

    超时了,只能先这么干了. return Math.pow(x, n);

  5. CVE-2018-2628 weblogic WLS反序列化漏洞--RCE学习笔记

    weblogic WLS 反序列化漏洞学习 鸣谢 感谢POC和分析文档的作者-绿盟大佬=>liaoxinxi:感谢群内各位大佬及时传播了分析文档,我才有幸能看到. 漏洞简介 漏洞威胁:RCE-- ...

  6. windows环境下最简单的nginx + tomcat负载均衡配置示例

    后端是两台tomcat服务器,我们简称为node1 和node2,访问地址分别是 http://192.168.1.2:8080 和 http://192.168.1.4:8080 前端使用nginx ...

  7. JQuery操作Select标签

    jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加 ...

  8. 查看Oracle的redo日志切换频率

    1.Oracle log 每次切换会记录到告警日志中 设想写个方案来查看log切换频率来判断Oracle log是否应该更改大小. 2.sql a.查看redo日志信息 select * from v ...

  9. Java 泛型 详解

    一.什么是泛型 本质而言,泛型指的是参数化的类型.参数化的类型的重要性是:它能让你创建类.接口和方法,由它们操作的数据类型被指定为一个参数.操作参数化类型的类.接口或方法被称为泛型,如泛型类或泛型方法 ...

  10. 利用Linux系统生成随机密码的8种方法

    Linux操作系统的一大优点是对于同样一件事情,你可以使用高达数百种方法来实现它.例如,你可以通过数十种方法来生成随机密码.本文将介绍生成随机密码的十种方法. 1. 使用SHA算法来加密日期,并输出结 ...