使用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. Lightoj-1220

    https://vjudge.net/problem/LightOJ-1220 求x=bp中最大的p,x可能为负数. 因数分解,x=p1x1*p2x2*...*pnxn x=(p1x1'*p2x2'* ...

  2. 用setTimeout实现setInterval函数

    最近get一个新知识,也不算是新知识,可能是以前自己没有认真对待(对自己无语ing,si不si傻). 废话不多说,直接来看代码吧 function setInterval(func, t){ var ...

  3. 【DEV GridControl】怎样使GridView中满足某个条件的行可编辑,其余行不可编辑?

    DXperience控件包,使用起来非常方便,但有时候某些功能的实现在文档中不太容易找到解决方案,比如下面要提到的这个功能我就在文档中找了很久也没找到,最后还是在官方论坛上找到的. 具体问题是这样的: ...

  4. 在jenkins和sonar中集成jacoco(二)--在jenkins中生成jacoco覆盖率报告

    先要在jenkins上安装jacoco的插件,安装完成之后在job的配置项中可以增加这个选项: 第一个录入框是你的覆盖率文件(exec),第二个是class文件目录,第三个是源代码文件目录. 配置好了 ...

  5. Winform开发常用控件之DataGridView的简单数据绑定——代码绑定DataSet、DataTable、IList、SqlDataReader

    前文介绍了Winform为DataGridView提供的数据自动绑定功能,下面介绍一下采用代码的数据绑定 1.用DataSet和DataTable为DataGridView提供数据源 先上代码 pri ...

  6. IOS NSBundle的使用,注意mainBundle和Custom Bundle的区别

    1.[NSBundle mainBundle],文件夹其实是Group,如左侧的树形文件管理器 Build之后,文件直接就复制到了根目录下,于是读取的方法,应该是这样: NSString *earth ...

  7. test20181021 快速排序

    题意 对于100%的数据,\(n,m \leq 10^5\) 分析 考场上打挂了. 最大值就是后半部分和减前半部分和. 最小是就是奇偶相减. 方案数类似进出栈序,就是catalan数 线段树维护即可, ...

  8. linux sort 多列正排序,倒排序

    转载:https://segmentfault.com/a/1190000005713784 sort是在Linux里非常常用的一个命令,管排序 sort将文件的每一行作为一个单位,相互比较,比较原则 ...

  9. 使用rollup 开发专业js library

    rollup 是一个不错的javascript 模块打包器,一般我们用来构建library 安装 npm install -g rollup 参考集成jquey && shortid ...

  10. hydra nodejs 微服务框架简单试用

    hydra 是一个以来redis 的nodejs 微服务框架 安装 需要redis,使用docker 进行运行 redis docker run -d -p 6379:6379 redis 安装yo ...