最近刚刚完成自己的毕业设计(基于Vue的信息资讯展示与管理平台),于是想整理一下过程遇到的一些问题。

项目基于Vue开发,使用 Vue-cli 初始化项目文件目录时默认占用8080端口,而我又想使用 node.js 搭建本地服务器,链接数据库获取数据实现本地模拟。搭建node服务器时也需要提供一个端口号,又不能和8080重复,我选择了使用端口8888(这个不重要,只要不是已经被占用的端口,瞎写什么都可以)。当然,这样在使用URL地址时就因为端口号不同,涉及到了跨域请求的问题。

解决这种跨域请求问题有一个简单的办法 -- 给config目录下的index.js文件添加部分代码就可以解决。

config目录下的index.js文件如图所示:

配置代码如下:

proxyTable: { 
  '/api': {
    target: 'http://localhost:8888',
    changeOrigin: true,
    pathRewrite: {
      '^/api':'/api'
    } 
  }
}
  • target:接口的域名
  • changeOrigin:开启代理
  • pathRewrite:重写地址,可以看到的是使用了/api来匹配请求接口的域名,打个比方,假如接口名称是 '/api/graduate/getShowList' ,在实际请求中应该写成 '/api/graduate/getShowList' 。

vue-cli 初始化项目时开发环境中的跨域问题的更多相关文章

  1. Vue---vue-cli 中的proxyTable解决开发环境中的跨域问题

    使用vue+vue-cli+axios+element-ui开发后台管理系统时,遇到一个问题,后台给了一个接口,我这边用axios请求数据,控制台总是报405错误和跨域错误 错误 405? 没见过!! ...

  2. webpack项目在开发环境中使用静态css文件

    webpack项目在开发环境中使用静态css文件 在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法 ...

  3. VUE在开发环境下实现跨域

    1. 跨域设置 VUE项目的 config文件夹下index.js文件中修改 dev: proxyTable中的内容(默认是没有内容的): 添加内容: '/list': { target: 'http ...

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

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

  5. vue2.0开发环境下解决跨域问题

    1.找到vue 项目下的配置文件 /config/index.js 2.找到 proxyTable 配置项 proxyTable: { '/api': { target: 'http://www.xx ...

  6. 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)

    前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...

  7. 开发环境中biztalk项目设置注意事项(转)

      适用版本:biztalk 2006 适用环境:开发测试环境 在开发过程中,在开发环境中,一定会是一个对项目不断的修改.编译.部署.测试,查看测试结果,发现有问题,然后回到开发环境再修改.编译.部署 ...

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

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

  9. 关于vue项目中axios跨域的解决方法(开发环境)

    1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...

随机推荐

  1. 传奇GOM引擎授权过期解决方法.

    传奇GOM引擎授权过期解决方法 下载最新的GOM引擎,将里面的Key.Lic文件找出来,替换掉授权过期的版本,如果你本身是免费版最好是找同样的免费版的来覆盖. 如果你本身是免费版,但是却用的是商业版K ...

  2. JNJP节点指定端口

    jenkins节点机通过jnjp的方式访问jenkins服务器,端口号默认是随机分配,断开再连接则端口号会变. 由于公司管控较严,服务器开放的端口需要申请,因此不希望是随机分配的,而是可以指定端口. ...

  3. .NET中的字符串(5):字符串驻留

    StringBuilder对象 通过上面的分析可以看出,String类型在做字符串的连接操作时,效率是相当低的,并且由于每做一个连接操作,都会在内存中创建一个新的对象,占用了大量的内存空间.这样就引出 ...

  4. MySQL 将字符串转换为数字

    转载自:https://www.cnblogs.com/xiaoleiel/p/8316508.html 在操作mysql时,经常需要将字符转换成数字,这一步虽然简单,但不常用的话也很容易忘记,现将在 ...

  5. 忘记linux下的mysql密码,需要重新创建密码123456

    你必须要有操作系统的root权限了. # mysqld_safe --skip-grant-tables & &,表示在后台运行,不再后台运行的话,就再打开一个终端咯. # mysql ...

  6. 吴裕雄--天生自然TensorFlow2教程:函数优化实战

    import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D def himme ...

  7. MySQL中case when的基本用法总结

    MySQL中case when的基本用法总结原创Backcanhave7 最后发布于2018-12-06 15:14:15 阅读数 439 收藏展开MySQL中的case when有用两种用法,官方文 ...

  8. 最全BT磁力搜索引擎索引(整理分享,每日更新)

    btaa.xyz:http://www.veee.xyz/(可以访问,知名的BT磁力搜索,资源多,建议手机访问) 以下无法访问 idope.se:https://idope.se/(无法访问,资源丰富 ...

  9. 「JSOI2015」最大公约数

    「JSOI2015」最大公约数 传送门 考虑先枚举区间左端点, 然后我们会发现所有可能的区间虽然有 \(O(n)\) 个,但是本质不同的区间 \(\gcd\) 只有 \(\log n\) 级别,而且是 ...

  10. Python 之并发编程之线程下

    七.线程局部变量 多线程之间使用threading.local 对象用来存储数据,而其他线程不可见 实现多线程之间的数据隔离 本质上就是不同的线程使用这个对象时,为其创建一个只属于当前线程的字典 拿空 ...