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

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

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")
            })
时间: 2024-12-29 11:23:03

vue proxyTable 接口跨域请求调试(五)的相关文章

vue中调接口跨域问题,采用proxyTable同时调用不同服务器接口,404

之前报错跨域,然后选择在config/index.js中配置proxyTable解决跨域问题 proxyTable: { //配置反向代理 '/api':{ target:'http://XXS', //设置你调用的接口域名和端口号 changeOrigin:true, //是否跨域 pathRewrite:{ //是否重写地址.可简单理解为在target后面加上.../把target换成.... '^/api':'http://XXS'/ } }, '/chibi': { target: 'h

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

原因:你本地的请求ajax的get和post请求:如果你的请求头内放一些可用验证数据Token的时候就会存在跨域请求这是浏览器所不允许的问题: 方案一:后台的接口请求模式都写成jsonp请求,前端去调用: 特点:是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法,参数给服务端,然后服务端返回数据时会将这个callback 参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了. 缺点:它只支持GET请求而不支

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

1.创建一个Chrome的启动快捷方式: 2.右键点击快捷方式属性,然后在目标路径后面,添加以下参数: -disable-web-security -user-data-dir="e:\chromedev" 注意在最新版本的Chrome中,–user-data-dir参数也是必须要添加的,蓝色字体部分可以随便指定到其他路径,这里保存是的Chrome的用户数据的.

vue.js学习之 跨域请求代理与axios传参

vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{},改为这样: proxyTable: { '/api': { target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用'/ap

Vue中使用jsonp进行跨域请求

Vue-resouse中可以通过this.$http.jsonp的方式直接使用jsonp进行跨域请求.官方在推荐使用axios之后,axios并没有集成jsonp.但在axios的github中(https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp),可以直接安装jsonp并使用他来坐跨域请求. <script> var jsonp = require('jsonp'); export default { data(

解决vue axios跨域请求发送两次问题

问题: vue axios跨域请求,在Request Headers加Authorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求. 原因: 跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯.如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求. 解决方法: 后台:判断请求方式是OPTIONS,则不处理: 预请求 发送真正请求  PHP解决方法 class Common ex

Vue+axios+spring boot遇到的问题(跨域请求)

一.点击一次按钮 会发送两次请求的问题 第一个请求 Method是OPTIONS 第二个请求 Method是POST 后台过滤器也是检测出访问了两次,但是是偶尔才会重复访问. 这是因为 跨域请求导致 每次请求前都会先发送一个空的请求检查服务器, 可以在后台过滤器加个这个: @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOExce

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

ASP.NET WebApi+Vue前后端分离之允许启用跨域请求

前言: 这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目.前端使用Vue,后端则是使用ASP.NET WebApi.在搭建完成前后端框架后,进行接口测试时发现了一个前后端分离普遍存在的问题跨域(CORS)请求问题.因此就有了这篇文章如何启用ASP.NET WebApi 中的 CORS 支持. 一.解决Vue报错:OPTIONS 405 Method Not Allowed问题: 错误重现: index.umd.min.js:1 OPTIONS http://local