在开发过程中我们请求数据有时候调用的是第三方接口,此时便会遇到一个问题:跨域限制。对于跨域问题的解释就不详细叙述了,要了解的请自行百度。一般跨域问题控制台会报这个错:
        很多情况下后台会给我们做请求代理,当后台没有帮你的时候只能自己解决了,Vue-cli这里我用的是webpack,那么我们需要在webpack上做代理设置,具体步骤如下:
        假设请求地址为http://baidu.com/img/upload/file。
        1.在config/index.js文件的dev: {   proxyTable: { }}写入要跨域代理的链接地址,如下图所示:
                   
         注意: '/upload'为匹配项,我们匹配项写'/upload',那么当我们npm run dev把本地服务跑起来后localhost:8080/upload/file就是我们的代理地址了。
                target参数填写被请求的地址,比如第三方接口,比如上面的http://baidu.com/img/upload/file;
                changeOrigin参数是如果接口跨域需要配置这个参数;
                pathRewrite参数是重写地址;
                还有一个参数secure,如果是https接口需要配置这个参数;
 
        2.在config/dev.env.js文件中配置,如下图所示:
                                     
 
        3.在config/prod.env.js文件中配置,如下图所示:
        注意:在此处的upload填写'"//baidu.com/img/upload/"',不需要写'http:',在最后切记要加上'/';
 
        此时webpack的代理配置已经完成,需要重启服务,然后写请求函数就可以了,我使用的是axios搭配qs,所以请求函数为:
        export const uploadFile = params => { return axios.post('/upload/file', qs.stringify(params)).then(res => res.data)};
        请求函数各自写的不一样,在此只是想表达请求函数第一个参数url要写'/upload/file',这样相当于请求http://baidu.com/img/upload/file。至此跨域问题已经解决,亲测有效。
 
 
 
          如需转载请注明出处:http://www.cnblogs.com/zishang91/p/8909900.html,以便有错误可以及时修改,若有错漏不足之处,请见谅并且指点,谢谢!!!
 
 
 
 
 
 

Vue如何在webpack设置代理解决跨域问题的更多相关文章

  1. vue-webpack项目本地开发环境设置代理解决跨域问题

    前言: 一般跨域问题只要后端配置好的话,是不需要前端做处理的,但也不能保证你遇到的所有后端都能很好的处理这个问题,这个时候可能就需要前端设置代理解决这个问题了. 配置方法: 1. config/ind ...

  2. proxyTable设置代理解决跨域问题

    应用场景:在不同域之间访问是比较常见,在本地调试访问远程服务器....这时就有域问题. 解决方案一:在config里面的index.js里面的proxyTable //这里理解成用‘/api'代替ta ...

  3. VUE前端项目配置代理解决跨域问题

    VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...

  4. nginx反向代理解决跨域问题

    跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 下表格为前后端分离的域名,技术信息:   域名 服务器 使用技术 前端 http://b.yynf.com ...

  5. windows环境下 nginx+iis 反向代理解决跨域问题

    项目基本完成,是时候花点时间整理一下最近的姿势了 1 什么是跨域? 网上对于跨域的概念会有大篇幅的文章去解释,似乎有点玄乎,初学者很容易对这个概念产生恐惧,跨域其实很简单,其实只要知道一点,无法跨域访 ...

  6. NodeJS设置Header解决跨域问题

    转载: NodeJS设置Header解决跨域问题 app.all('*', function (req, res, next) { res.header('Access-Control-Allow-O ...

  7. 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

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

    前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cooki ...

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

    前言 我们在使用 vue-cli 启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以 localhost: 来请求接口数据的,localhost 是没有办法设置 coo ...

随机推荐

  1. hbuilder 中文乱码

    这是因为HBuilder默认文件编码是UTF-8,你可以在工具-选项-常规-工作空间选项中设置默认字符编码

  2. 搭建Sql Server AlwaysOn 视频教程

    本人搭建关于Sql Server 2012 AlwaysOn 的视频系列教程. 教程一: 观看及下载地址:https://pan.baidu.com/s/1QAvhgFTSyvpR5xQZbKHO3w ...

  3. [转].NET 4 并行(多核)编程系列之二 从Task开始

    本文转自:http://www.cnblogs.com/yanyangtian/archive/2010/05/22/1741379.html .NET 4 并行(多核)编程系列之二 从Task开始 ...

  4. git常用命令图解 & 常见错误

    Git 常用命令 基本命令 git clone.这是一种较为简单的初始化方式,当你已经有一个远程的Git版本库,只需要在本地克隆一份 git clone git://github.com/someon ...

  5. 滚动字幕Marquee

    基本语法  <marquee>滚动文字 </marquee> 文字移动属性的设置  方向 <direction=#> #=left, right,up,down 方 ...

  6. EXCEL Skills Commonly Used

    1. 判断某一列中的数据是否在另一列中 http://jingyan.baidu.com/article/358570f67fd4b0ce4724fc29.html 2. 快速删除excel中的空格( ...

  7. (转)编写Spring的第一个案例并测试Spring的开发环境

    http://blog.csdn.net/yerenyuan_pku/article/details/52832145 Spring4.2.5的开发环境搭建好了之后,我们来编写Spring的第一个案例 ...

  8. feign 负载均衡熔断器

    feign:和zuul配合进行负载均衡. 注解的含义: @EnableDiscoveryClient 声明它是一个资源服务端,即可以通过某些接口调用一些资源: @EnableFeignClients ...

  9. oracle插入中文乱码

    执行sql: select  userenv('language')     from dual;  --  AMERICAN_AMERICA.ZHS16GBK select * from v$nls ...

  10. TensorFlow低阶API(二)—— 张量

    简介 正如名字所示,TensorFlow这一框架定义和运行涉及张量的计算.张量是对矢量和矩阵向潜在的更高维度的泛化.TensorFlow在内部将张量表示为基本数据类型的n维数组. 在编写TensorF ...