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

WangXinPeng 2018-11-07 原文

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

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

最近在做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: {}

里面

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

就这样,请求成功了。

发表于 2018-11-07 13:55 小鹏的编程日志 阅读() 评论() 编辑 收藏

 

版权声明:本文为WangXinPeng原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/WangXinPeng/p/9922132.html

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

  1. vue项目接入api接口

    vue项目接入api接口 我们在做项目时,一切基础在于数据上面,所以接入api接口是关键。 访问接口是我们会遇 […]...

随机推荐

  1. Matlab中FFT快速傅里叶变换函数的应用及其物理意义学习

    在Matlab中fft就是一个现成的函数,看别人的代码模仿着用了,但是不懂FFT画出来的图什么意思?本文对这篇 […]...

  2. seo学习

    主要是运用到自己博客网站的seo, 做这个记录以免以后自己忘记。想到一点写一点。 买关键字的朋友,就不要看了。 […]...

  3. 007.基于Docker的Etcd分布式部署

    一 环境准备 1.1 基础环境 ntp配置:略 #建议配置ntp服务,保证时间一致性 etcd版本:v3.3. […]...

  4. 上古神器vim系列之移动三板斧

    [导读] 前文总结了vim如何进入,如何保存退出,如何进入编辑模式。本文来总结一些稍微进阶的内容,在norma […]...

  5. Win 10 、Win 8 系统默认字体如何修改为宋体

    Win 10 字体改为宋体方法:新建一个文本文档txt,将如下代码复制进去:Windows Registry […]...

  6. 如何把MACBook合盖不待机

    先插上电源再连接显示器,然后再合上盖子,就可以外接键盘和显示器工作。   让 Macbook电脑处于永久打开状 […]...

  7. 在没有DOM操作的日子里,我是怎么熬过来的(终结篇)

      前言   在我写终结篇的日子里,Vue版本稳定在2.9.1。当我摸清Vue的脉络之后,以一个爬坑无数的亲历 […]...

  8. 爬取哔哩哔哩影视榜单

    一.主题式网络主题式网络爬虫设计方案 1.爬虫名称:爬取哔哩哔哩影视榜单 2.爬取内容:影片排名,影片标题,影 […]...

展开目录

目录导航