在不同域之间访问是比较常见,在本地调试访问远程服务器。。。。这就是有域问题。

VUE解决通过proxyTable:

在 config/index.js 配置文件中

  dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
//proxyTable: {},
proxyTable: proxyConfig.proxyList,
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}

划红线部分就是设置代理参数:

在config目录创建,proxyConfig.js 写入

module.exports = {
proxyList: {
'/apis': {
// 测试环境
target: 'https://goods.footer.com', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite重写的,
}
}
}
}

在 config/index.js 配置文件上边引入

var proxyConfig = require('./proxyConfig')
 

使用:

服务器提供接口:

https://goods.footer.com/health/list

Vue请求

var obj = {
pageSize: 20
}
this.$http.get( '/apis/health/list',{params: obj})
.then(function(res){
// 成功回调
},function(){
alert("error")
})

vue proxyTable 接口跨域请求调试的更多相关文章

  1. vue proxyTable 接口跨域请求调试(五)

    在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: requir ...

  2. Vue-接口跨域请求调试proxyTable

    在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://lo ...

  3. vue 使用axios 跨域请求数据的问题

    axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...

  4. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

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

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

  6. vue-cli 前端开发,后台接口跨域代理调试问题

    使用 webpack的方式开发的时候,前台开发过程中需要调用很多后台的数据接口,但是通常前后台分离的开发方式,后台的接口数据很可能是不方便或者是不能在前端同学的电脑上运行的,也就出现了所谓的跨域问题. ...

  7. 让新版Chrome支持本地跨域请求调试

    1.创建一个Chrome的启动快捷方式: 2.右键点击快捷方式属性,然后在目标路径后面,添加以下参数: --disable-web-security --user-data-dir="e:\ ...

  8. Vue ajax跨域请求

    Vue webpack-dev-server实现跨域请求 思路 配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量:site Vue.pro ...

  9. VUE系列三:实现跨域请求(fetch/axios/proxytable)

    1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...

随机推荐

  1. 使用urllib2+re爬取web网站

    应用1,使用urllib2+re爬取淘宝网指定页面的所有图片

  2. adoquery.refresh和adoquery.query的区别

    大的区别没有 1: requery是通过重新发出原始命令并再次检索数据,可使用 Requery 方法刷新来自数据源的 Recordset 对象的全部内容.调用该方法等于相继调用 Close 和 Ope ...

  3. react 粗略使用

    1.首先在index.html页面上写好dom,给他一个id让他引用js里的react. 2.index.js里面的代码就是三步走. 第一步:引用react,各种引用依赖. 第二步:创建dom,但它是 ...

  4. yolo算法解析

  5. Reading Text from Images Using C#

    Introduction By using Optical Character Recognition (OCR), you can detect and extract handwritten an ...

  6. VM虚拟机截图方法介绍

    可以先安装QQ之类的截图软件,但比较麻烦,而且截图之后还需要安装VMware Tools等工具才能拿到物理机上 先定向到物理机,快捷键为CTRL+ALT,之后在用qq截图快捷键ctrl+alt+a即可 ...

  7. npm、webpack、vue-cli

    Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome V8 引擎的. npm 是Node.js 的包管理 ...

  8. GIL、进/线程池、同/异步、阻/非阻塞

    1 GIL:全局解释器锁 GIL本质就是一把互斥锁,是夹在解释器身上的, 同一个进程内的所有线程都需要先抢到GIL锁,才能执行解释器代码 2.GIL的优缺点: 优点: 保证Cpython解释器内存管理 ...

  9. Codeforces Round #530 (Div. 2) A,B,C,D

    A. Snowball 链接:http://codeforces.com/contest/1099/problem/A 思路:模拟 代码: #include<bits/stdc++.h> ...

  10. project 2013 工时完成百分比不会自动更新填充

    [工时完成百分比].[实际完成百分比]  需要手填 [完成百分比] 会自动填,如下图