使用http-proxy-middleware 代理跨域

例如请求的url:“http://f.apiplus.cn/bj11x5.json

1、打开config/index.js,在proxyTable中添写如下代码:

proxyTable: {
'/api': { //使用"/api"来代替"http://f.apiplus.c"
target: 'http://f.apiplus.cn', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'http://f.apiplus.cn' //路径重写
}
}
}

2、使用axios请求数据时直接使用“/api”:

getData () {
axios.get('/api/bj11x5.json', function (res) {
console.log(res)
})

通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:

let serverUrl = '/api/'  //本地调试时
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时
export default {
dataUrl: serverUrl + 'bj11x5.json'
}

转载自:https://www.cnblogs.com/ldlx-mars/p/7816316.html

使用http-proxy-middleware 代理跨域的更多相关文章

  1. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  2. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  3. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  4. 前端笔记之Vue(五)TodoList实战&拆分store&跨域&练习代理跨域

    一.TodoList 1.1安装依赖 安装相关依赖: npm install --save-dev webpack npm install --save-dev babel-loader babel- ...

  5. nginx代理跨域(mac)

    首先找到nginx.conf文件,修改并添加如下配置 html 文件 <!DOCTYPE html> <html lang="en"> <head&g ...

  6. CORS跨域与Nginx反向代理跨域优劣对比

    最近写了一些关于前后端分离项目之后,跨域相关方案的基本原理和常见误区的帖子,主要包括CORS和Nginx反向代理.这两种方案项目中都有在用,各有优缺,关于具体使用哪种方案,大家的观点也不大一致,本文主 ...

  7. 使用nginx代理跨域,使用nginx代理bing的每日一图

    前言 自从搞清楚了跨域原理后一直自鸣得意,感觉跨域没啥问题了.而事实上对关于跨域的几个header的理解也有限,但那又如何,我能做到跨域就行了.今天想把博客背景图改成bing的每日一图,发现遇到跨域问 ...

  8. (三)ajax请求不同源之nginx反向代理跨域

    一.基本原理 nginx是一个高性能的web服务器,常用作反向代理服务器.nginx作为反向代理服务器,就是把http请求转发到另一个或者一些服务器上. 用nginx反向代理实现跨域,是最简单的跨域方 ...

  9. (三)ajax请求不同源之服务器代理跨域

    一.基本原理 Server Proxy,顾名思义,在服务器端设置一个代理,由服务器端向跨域的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 二.客户端和服务端代码 1.在localho ...

随机推荐

  1. Java中字符串比较的注意点

    Java中必须使用string1.equals(string2)来进行判断 补充如果: string s1=new String("Hello"); string s2=new S ...

  2. 在jenkins和sonar中集成jacoco(一)--使用jacoco收集单元测试的覆盖率

    之前系统的持续集成覆盖率工具使用的是cobetura,使用的过程中虽然没什么问题,但感觉配置比较麻烦,现在准备改用jacoco这个覆盖率工具来代替它.接下来我介绍一下jenkins配置jacoco,并 ...

  3. 【转】Javascript中的this

    作者: 阮一峰 日期: 2010年4月30日 this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, function test(){ ...

  4. ADS1.2使用

    ADS编译错误Error : A1163E: Unknown opcode ARM汇编指令不支持顶格写,否则不能识别,指令前加上空格即可. 使用for(;;;)//死循环,编译报错如下,说是该语句有错 ...

  5. bacnet ip转MQTT

    迈思德网关最新支持BACNET IP协议,可以将BACNET IP转换为MODBUS.MQTT.OPC等协议,与百度天工,阿里云等无缝对接. 支持AI.AO.DI.DO.AV.DV六个对象的读写.

  6. BZOJ4350: 括号序列再战猪猪侠【区间DP】

    Description 括号序列与猪猪侠又大战了起来. 众所周知,括号序列是一个只有(和)组成的序列,我们称一个括号序列S合法,当且仅当: 1.( )是一个合法的括号序列. 2.若A是合法的括号序列, ...

  7. 《DSP using MATLAB》 示例 Example 9.16

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  8. PHP连接不上MySQL解决方案总结

    1. 获取当前 mysql.default_socket.mysqli.default_socket.pdo_mysql.default_socket 配置信息 建立一个 PHP 文件, 显示 php ...

  9. C#/.NET主线程与子线程之间的关系

    以前一直没有在程序中写过总结,再翻开程序时却不知所云,所以我决定写总结        一般 一个应用程序就对应一个进程,一个进程可有一个或多个线程,而一般有一个主线程.       有的博客上说“至少 ...

  10. Loararunner录制脚本

    LoadRunner录制 1.启动LoadRunner,用管理员方式打开,选择 “Create/Edit Scripts” 2.从这两个方式任意方式打开脚本页面 3.选择协议,这里我们举例子,用“We ...