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

最近在做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. C++继承经典样例

    c++继承经典样例 #include <iostream.h> class Base { private:         int b_number; public:         Ba ...

  2. C#更改控制台文本的前景色和背景色

    关键字:C# NET 控制台 前景色 背景色地址:http://www.cnblogs.com/txw1958/archive/2012/12/07/csharp-console-color.html ...

  3. python3实现域名查询和whois查询

    关键字:python3 域名查询 域名查询接口 whois查询原文:http://www.cnblogs.com/txw1958/archive/2012/08/31/python3-domain-w ...

  4. 经典数字图像处理(matlab 实现)

    Ivan Selesnick(Software) Sparsity / Total variation / Denoising Software - Michael Elad's Personal P ...

  5. WPF: WrapPanel 容器的数据绑定(动态生成控件、遍历)

    原文:WPF: WrapPanel 容器的数据绑定(动态生成控件.遍历) 问题:        有一些CheckBox需要作为选项添加到页面上,但是数目不定.而为了方便排版,我选择用WrapPanel ...

  6. asp .net Cookies

    Request.Cookies和Response.Cookies When validating cookies or cookie data from the browser you should ...

  7. StackLayout

    堆栈式地放置内容可以在xaml中完成视图,也可以在cs代码中完成视图 Xamarin的所有视图和布局都是可以 1.在xaml中完成 2.在cs代码中完成视图 (类比WPF) 示例 在cs代码中完成视图 ...

  8. 用MVVM模式开发中遇到的零散问题总结(3)——自制正则表达式万能绑定转换器

    原文:用MVVM模式开发中遇到的零散问题总结(3)--自制正则表达式万能绑定转换器 前言 最近接受了3个项目的洗礼,出差近3个月,各种北京.广州.昆明来回奔波,好久没写博客了,之前我觉得我遇到的问题都 ...

  9. jquery 显示和隐藏的三种方式

     <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    & ...

  10. Windows7,程序兼容助手:这个程序可能安装不正确(做注册表里设置白名单,软件自身的名字不能带setup)

    Windows上有一个很奇怪的一个现象,一个exe只要名字里面带了setup\install之类的,打开exe后立即退出就会弹出下面的窗口. 解决方法: 方法一.更改exe的名字,去掉setup\in ...