在我们实际开发中,选择不错的前端框架可以为我们省掉很多时间,当然,有时我们也会遇到很多坑。

最近在做vue项目时就遇到了跨域问题,一般来说,出现跨域我们第一反应使用jsonp,但是这个只支持get请求。在这就是让后端加上响应头,允许我们跨域请求。

但是在做vue项目时,虽然后端给我加了请求头,依然出现了跨域,于是乎我就开始找各路大神的博客,终于给解决了。

如果谁用vue-cli脚手架搭建的项目,出现跨域后,我的解决办法是利用反向代理将我们的请求源给代理一下,

具体代码

在config文件夹中的index.js里将

'/api': {  //使用"/api"来代替"http://f.apiplus.c"
//target: 'http://192.168.0.102:8080', //源地址
target: 'http://47.99.54.35:8081', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': '' //路径重写
}
}

放到

proxyTable: {}

里面

然后,我们在组件中请求数据时

就这样,请求成功了。

工作中vue项目前后端分离,调用后端本地接口出现跨域问题的完美解决的更多相关文章

  1. 开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)

    原理:开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目 ...

  2. 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )

    前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...

  3. springMVC前后端分离开发模式下支持跨域请求

    1.web.xml中添加cors规则支持(请修改包名) <filter> <filter-name>cors</filter-name> <filter-cl ...

  4. 从壹开始前后端分离 [.netCore 填坑 ] 三十三║ ⅖ 种方法实现完美跨域

    缘起 哈喽大家周四好,趁着大家在团建的时候花一个下午学点儿东西,也是督促大家学习哟,希望大家看到老张的文章,可以有一丢丢的学习动力.不过话说过来,该吃的团建还是要去的,不能学我呀 [ /(ㄒoㄒ)/~ ...

  5. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  6. 跨域调用webapi web端跨域调用webapi

    web端跨域调用webapi   在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...

  7. ASP.NET中Cookie跨域的问题及解决代码

    ASP.NET中Cookie跨域的问题及解决代码 http://www.liyumei.net.cn/post/share18.html Cookies揭秘  http://www.cnblogs.c ...

  8. vue+django分离开发的思想和跨域问题的解决

    一.介绍 在前后端分离的开发过程中,会涉及到跨域的问题,比如本次个人使用的Django+vue的框架,在vue对Django进行响应,Django再将响应的数据返回给vue,vue在进行渲染,如果不设 ...

  9. 解决Vue调用springboot接口403跨域问题

    最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资 ...

随机推荐

  1. Java实现查找二叉树&C++的做法

    写了个Java的查找二叉树,用递归做的,不用递归的还没弄出来.先贴一下.回头再研究. BTreeTest.java: public class BTreeTest{ class Node{ Node ...

  2. "Redis客户端连接数一直降不下来"的有关问题解决 good

    [线上问题] "Redis客户端连接数一直降不下来"的问题解决 前段时间,上线了新的 Redis缓存(Cache)服务,准备替换掉 Memcached. 为什么要将 Memcach ...

  3. 如何成为QTP专家

    关键字:QTP 自动化测试 专家地址:http://www.cnblogs.com/txw1958/archive/2012/11/20/how-to-become-qtp-guru.html Wou ...

  4. python 教程 第二十章、 数据库编程

    第二十章. 数据库编程 环境设置 1).安装MySQL-python http://www.lfd.uci.edu/~gohlke/pythonlibs/ MySQL-python-1.2.3.win ...

  5. 新秀翻译(一个)——Java在继承和组合

    阅读英文的程序猿的能力,这是非常重要的.过去的几年中一直在学习英语,今天心血来潮,在网上找什么鲍文简要翻译. 普通级,能力有限,看官还请大家多多指点. 译文: 本文将会举例说明Java中继承和组合的概 ...

  6. SICP 1.6-1.8

    1.6由于scheme应用序求值的性质,该函数会陷入循环(一直计算 improve guess x) 1.7 值过小,0.001这个精度远远不够... 值过大,由于浮点数精度有限,(比如使用IEEE7 ...

  7. 在vs2015上使用asp.net core+ef core

    官方的文档https://docs.asp.net/en/latest/tutorials/first-mvc-app/start-mvc.html 先来看一下实现的效果

  8. QT 自定义消息(超级简单的一个例子)

    #define TEST_EVENT QEvent::User + 100   class CVxActuatorMain : public QMainWindow {   protected:    ...

  9. Win8 Metro(C#)数字图像处理--2.59 P分位法图像二值化

    原文:Win8 Metro(C#)数字图像处理--2.59 P分位法图像二值化  [函数名称]   P分位法图像二值化 [算法说明]   所谓P分位法图像分割,就是在知道图像中目标所占的比率Rat ...

  10. Win8 Metro(C#)数字图像处理--2.53图像傅立叶变换

    原文:Win8 Metro(C#)数字图像处理--2.53图像傅立叶变换  [函数名称] 1,一维FFT变换函数         Complex[] FFT(Complex[] sourceDat ...