由于没有跨域的接口,所以,用8080端口请求8081端口,来模拟跨域。跨域会出现下面报错。

1.找到config文件夹下index.js,在proxyTable对象里复制以下代码:

    proxyTable: {
'/apis': {
// 测试环境
target: 'http://localhost:8081', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite重写的,
}
}
},

 注意:【更改完这个配置文件后,需要重启项目】

2.使用fetch,vue-resource或axios请求接口

fetch请求:

    //用 /apis代替http://localhost:8082
fetch("/apis").then(res=>{
console.log(res);
})

axios请求:

this.$axios.get("/apis").then(res=>{
console.log(res);
})

vue-resource请求:

  this.$http.get("/apis").then(res=>{
console.log(res);
});

这样请求,就不会跨域了:

使用proxyTable解决vue里的跨域问题的更多相关文章

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

    Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...

  2. 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题

    在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...

  3. Vue proxyTable 解决开发环境的跨域问题

    在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...

  4. 转:Vue-cli proxyTable 解决开发环境的跨域问题

    转:http://www.jianshu.com/p/95b2caf7e0da 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了 ...

  5. 解决vue代理和跨域问题

    一.安装vue-resource插件 安装命令:npm install vue-resource --save  安装完之后在根目录下的package.json检查一下插件的版本 在rourer-in ...

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

    https://blog.csdn.net/u012149969/article/details/80288126 https://vuejs-templates.github.io/webpack/ ...

  7. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  8. vue开发之跨域请求,请求头not allowed by Access-Control-Allow-Headers,后端cookie session值取不到(二)

    原因:你本地的请求ajax的get和post请求:如果你的请求头内放一些可用验证数据Token的时候就会存在跨域请求这是浏览器所不允许的问题: 方案一:后台的接口请求模式都写成jsonp请求,前端去调 ...

  9. Vue开发环境跨域访问

    Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下 module.exports = { dev: { // Paths assetsSubD ...

随机推荐

  1. Android导出数据库文件

    由于Android系统权限问题,直接用Android Studio 的Device File Explorer无法查看墨人生成的*.db文件,不过可以通过adb命令获取到: adb pull /dat ...

  2. Linux系统常见的压缩与打包命令

    常见的压缩文件扩展名 1.*.Z          compress程序压缩的文件 2.*.gz         gzip程序压缩的文件 3..bz2        bzip2程序压缩的文件 4..t ...

  3. 项目(七)SVN版本管理与大型代码上线方案

    SVN介绍 Svn(subversion)是近年来崛起的非常优秀的版本管理工具,与CVS管理工具一样,SVN是一个跨平台的开源的版本控制系统.Svn版本管理工具管理着随时间改变的各种数据.这些数据放置 ...

  4. angular1时间控件之时间比较大小,比如入住日期和离店日期,入住不能晚于离店时间

    功能可能是大家有时遇到的,不过angluar1现在用的人很少了,希望帮上和我一样掉坑里的朋友吧,之前自己也在网上找过几乎没找到angluar1和我代码需求一样的控件,没办法自己造 了,看代码图 就差不 ...

  5. spring mvc 参数绑定

    基础类型 原始类型:id必须要传,否则报错. @RequestMapping("/test") @ResponseBody public ResponseData test(int ...

  6. Spring:MVC

    摘要 Spring MVC 是一个开源的.基于MVC架构的WEB应用框架.这里记录MVC模型的概念以及Spring MVC 的请求处理流程. 关键词:Spring MVC 一.什么是Spring MV ...

  7. Django form表单功能的引用(注册,复写form.clean方法 增加 验证密码功能)

    1. 在app下 新建 forms.py 定义表单内容,类型models from django import forms class RegisterForm(forms.Form): userna ...

  8. 【LeetCode刷题系列 - 003题】Longest Substring Without Repeating Characters

    题目: Given a string, find the length of the longest substring without repeating characters. Example 1 ...

  9. 笔记之monkey自定义脚本

    自定义脚本的稳定性测试 常规MOnkey测试执行的是随机的事件流,但如果只是想让Monkey测试某个特定场景者时候就需要用到自定义脚本,Monkey支持执行用户自定义脚本的测试,用户之需要按照Monk ...

  10. Centos 7创建一个服务

    首先创建服务文件 vim /etc/systemd/system/node.service #内容如下 [Unit] Description=ethereum-go Monitor Daemon Af ...