使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】

本文适用人群:

  • 会使用 vue-cli 搭建一个基本的 vue webpack 项目,本文的目录结构基于 webpack 模板结构
  • 懂得 axios 基本用法

问题导向

日常开发中,前端经常需要通过 ajax 从后端获取数据。而在这种前后端分离的开发模式下,往往前端项目与后端项目的 IP地址、端口号、协议 大概率是不一样的,由于浏览器的安全策略设定,不进行相应配置的话,前端的请求就会被浏览器拦截掉啦。

假设某个页面组件在加载的时候会向后端发送一个请求,然后根据返回的结果来渲染页面。代码示例如下:

前端项目通过 npm run dev 运行在 localhost:8081 上,

后端项目通过 apache 运行在 localhost/test/public/api/books

<template>
 <div class="hello">
 <ul>
  <li v-for="book of books">{{book.name}}</li>
 </ul>
 </div>
</template>
<script>
 import axios from 'axios';
 export default {
 name: 'HelloWorld',
 data() {
  return {
  books: []
  }
 },
 created(){
  let self = this;
  axios.get("http://localhost/test/public/api/books")
  .then((response)=>{
  self.books = response.data;
  });
 }
 }
</script>

直接访问后端链接,将能得到以下返回内容:

[
 {"name":"javascript \u4ece\u5165\u95e8\u5230\u653e\u5f03"},
 {"name":"\u9888\u690e\u75c5\u5eb7\u590d\u6307\u5357"},
 {"name":"\u89c6\u529b\u4fdd\u62a4\u6307\u5357"}
]

但是当我们在浏览器中运行前端页面,会报错!控制台打印如下:

可见,浏览器对于跨域访问进行了限制,因为在例子中前端项目url与后端项目url的端口号不相同,所以浏览器拦截了我们的请求。

解决方案

解决方式有很多种,包括可以很简单粗暴地让后端代码设置一个 Access-Control-Allow-Origin 头来解决这个问题。但是,在实际开发中,后端的小哥哥们才不会理会你这个羞耻的小请求呢~

那怎么办咧~

其实我们可以通过配置 vue 项目中的 config/index.js 来解决问题。

将 dev 中的 proxyTable 改为如下:

proxyTable: {
 '/api': {
 target: 'http://localhost/test/public/api/',
 changeOrigin: true,
 pathRewrite: {
  '^/api': ''
 }
 }
},

接着,再将 vue 组件页面中的 ajax 请求代码改为如下:

// 改为这样,原来是这样:axios.get("http://localhost/test/public/api/books")
axios.get("/api/books")

重新运行 npm run dev ,运行效果如下:

当当当!成功!

为什么这么做?

当我们打开浏览器的开发者工具查看一下网络请求就会发现,这个 ajax 请求竟然是向我们前端的 webpack-dev-server 发送的:

而且居然能返回正确的数据???

浏览器有安全策略限制,但是第三方的服务(服务器)没有呀,所以我们可以通过让浏览器访问前端开发服务器的url,让前端开发服务器去向后端服务器发送请求,再返回数据给浏览器,这样子就不存在跨域问题啦。

当我们在配置中这么写时:

proxyTable: {
 '/api': {
 target: 'http://localhost/test/public/api/',
 }
},

对于8081端口的开发服务器而言,所有以 /api 开头的 uri 都会被转发到 http://localhost/test/public/api/

也就是说,在浏览器中访问 localhost:8081/api/books ,前端开发服务器就会向 http://localhost/test/public/api/api/books 请求数据。就是简单粗暴地在 target 之后拼接上当前的uri。

会发现这样子做,实际的 url 中多了一个 /api ,不满足我们的需求,所以可以通过 pathRewrite 将这几个字符串替换掉。

// 将 "/api" 开头的 url 中的 "api" 替换成 空
proxyTable: {
 '/api': {
 target: 'http://localhost/test/public/api/',
 pathRewrite: {
  '^/api': ''
 }
 }
},
// 根据上面的规则
// 当在浏览器访问 localhost:8081/api/books
// 则实际访问的是 http://localhost/test/public/api/books
// 假设设置成
pathRewrite: {'^/api': '/somethingnew'}
// 当在浏览器访问 localhost:8081/api/books
// 则实际访问的是 http://localhost/test/public/somethingnew/books

而配置项 changeOrigin: true 则是设置了前端开发服务器向后端发送请求时 HTTP 包中的 HOST 字段。当设置为 true 时,HOST 会被设置成目标地址(target)中的主机。当后端服务器是虚拟主机时,这个选项显得尤为重要,或者说,同一个IP绑定了多个服务器服务时显得尤为重要。不设置的话,可能会导致请求不到数据。

更多的 proxyTable 可用参数可以参考 http-proxy-middleware 的文档

(0)

相关推荐

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

    和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名. 今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然.在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,使用的就是这个参数. https://vuejs-t

  • nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)

    准备工作: 1.安装nodejs ---还用我教了? 2.安装依赖包express4.x  点这里>>>nodeJS搭建本地服务器 3.安装vue-cli脚手架 点这里>>>vue-cli构建vue项目 这里强调一下,express是后端服务器,它是一个独立的服务器,vue启动的是前端服务器,vue-cli中已经集成了一个小型的express,这两个服务器是分开放的,但是它们都是基于nodejs的. nodeJS部分:这里我已经认为你搭建好了express服务器,并且能

  • 详解vue-cli本地环境API代理设置和解决跨域

    前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的. 我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置.我们可以直接通过node.js代理服务器来实现跨域请求. vue proxyTable接口跨域请求调试 在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子: de

  • 详解Vue-cli代理解决跨域问题

    使用vue-cli调接口的时候,总是会出现垮与问题,因为vue的localhost与访问域名不一致导致.而这一点,开发者显然也想到了,故而在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,这个配置就是将localhost映射成访问的域名. 那么何为代理? 代理服务器英文全称是Proxy Server,其功能就是代理网络用户去取得网络信息.形象的说:它是网络信息的中转站.可以简单粗暴理解为把你的域名转换成你访问的域名,(我这么记的,当然可能并

  • 详解vue-cli项目中的proxyTable跨域问题小结

    什么是跨域? 同源策略规定了如果两个 url 的协议.域名.端口中有任何一个不等,就认定它们跨源了. 跨域的解决方式有哪几种? 1.JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写. JSONP实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的src 不受同源策略约束来跨域获取数据. JSONP 由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数.回调函数的名字一般是在请求

  • 解决Vue+SpringBoot+Shiro跨域问题

    相信大家刚开始做都会遇到这个问题,在网上找了好多也不管用,都写的不全, 在这里记录一下,希望对大家有所帮助 一.配置Vue前端 在config下index.js中配置代理信息 注意:这里的跨域配置只在开发环境中有效,打包部署后,这个跨域就不起作用了,本人也是这里卡了好久,Vue前端打包后,最好部署到nginx上,用nginx可以直接解决跨域问题 1.开发跨域配置 proxyTable: { '/api': { target: 'http://xxxx.com', //地址 changeOrigi

  • vue 本地环境跨域请求proxyTable的方法

    主要在config->index.js中配置 proxyTable: { '/gameapi': { changeOrigin: true, // target: 'http://rap.id.cn/mockjs/20', mock地址 target: 'http://192.168.1.124',服务器地址 pathRewrite: { '^/gameapi': '/gameapi' }, secure:false } } 因此,发送请求时候url写为('/gameapi/gift-apply

  • vue使用axios跨域请求数据问题详解

    axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader("Access-Control-Allow-Origin", www.allow-domain.com) 但是很多时候,后台出于一些原因不想修改或者已经写好jsonp的接口需要适应不同平台,此时,前端就可以单独引入依赖解决该问题了. 引入依赖 cnpm install jsonp 导入到vu

  • 基于VUE移动音乐WEBAPP跨域请求失败的解决方法

    在学习一位vue大牛的课程<VUE2.0移动端音乐App开发>时,由于vue的版本原因遇到了一些问题 这是其中之一,花费了很多的时间去解决 虽然搞定了这个问题,但是很多东西理解也不是很到位,下面详细说: 系统windows,vue版本2.9.1 项目结构如下: 这里就知道版本差异了,我没有dev-server这个文件,按照黄大牛的配置会报404的错误,错误具体我就不贴了 直接上解决办法 首先在config目录下配置index.js文件如下 然后在webpack.dev.conf中配置如下 当然

  • 完美解决axios跨域请求出错的问题

    错误信息: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 403

  • 已解决:No 'Access-Control-Allow-Origin'跨域问题

    问题分析: 这是常见的跨域请求问题,在前后端分离的项目中常见,前端项目中的请求路径直接用后台请求路径(例如:http://192.168.1.1:8080/demo/getUser.do),但根据浏览器的网络请求规则,后台Server是不允许这样直接调用的(会被当黑客恶意攻击给拦截掉).从而导致该跨域请求被拒绝(如下图). Access to XMLHttpRequest at 'http://192.168.1.1:8080/app/easypoi/importExcelFile' from

  • JavaScript如何实现跨域请求

    什么是跨域请求? 简单的理解就是向不在同一个域名的服务器文件发出请求.这个还是用实际的例子来说明一下吧,比如baidu.com向cxyblog.com发送请求,这两个域名是不同的,那么这就是跨域了,出于安全性的考虑,这样是不允许的.另外需要注意的是不同子域名或者同域名不同端口之间或者相同域名不同协议等发送的请求也都算是跨域的,基本上可以为归为下面几类: (1)http://www.baidu.com向http://www.cxyblog.com发送请求 (2)http://www.cxyblog

  • 详解基于angular-cli配置代理解决跨域请求问题

    1.跨域请求产生 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本. 而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下,进而会产生跨域问题. 2.通用解决方案 如果浏览器支持HTML5,那么就可以一

  • 利用SpringMVC过滤器解决vue跨域请求的问题

    之前写过通过注释的方法解决跨域请求的方法,需要每次都在controll类使用注解,这次通过springmvc的拦截器解决: 继承SpringMVC的类HandlerInterceptor重写preHandle方法,这个方法会在到达 controll之前调用,如下 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

  • Vue axios 跨域请求无法带上cookie的解决

    在main.js设置 // 携带cookie axios.defaults.withCredentials = true 补充知识:VUE axios请求跨域时没有带上cookie或者每次cookie都改变 这两天用VUE写管理后端时,碰到一个奇葩问题: 我本地使用dev配置开发的时候 请求可以带上cookie信息  打包出来部署在服务器上 请求就没带上cookie信息. 然后自己慢慢排查,联合后端同事,排查这个cookie问题,前端也配置了 axios.defaults.withCredent

随机推荐