使用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. PHP------数组和对象相互转化,stdClass Object转array

    数组转JSON PHP json_encode() 用于对变量进行 JSON 编码,该函数如果执行成功返回 JSON 数据,否则返回 FALSE . JSON转数组 PHP json_decode() ...

  2. HDU1598 并查集+贪心

    find the most comfortable road Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  3. Coderforce 560B-Gerald is into Art

    题目大意:给了三个矩形的长和宽,问第一个能否把其他两个装在内部,要求内部之间不重叠,不出界(可重边)? 题目分析:这道题...考虑不够全面导致比赛时没有出来...当时,就是觉得自己的代码很完美,不可能 ...

  4. sqlserver版本分类下载以及各个版本之间的区别是什么

    很多用visual studio做开发的朋友经常会用到sqlserver数据库,但是往往在选择的时候就不知道该使用哪个版本了,今天亦是美网络就给大家分享一下sqlserver各个版本之间的区别,以及各 ...

  5. cocos creator开发微信小游戏记录

    先用cocoscreator实现游戏逻辑 在cocoscreator项目里可以调用微信小游戏api 在cocos里面判断小游戏的运行环境 if (cc.sys.platform === cc.sys. ...

  6. 【MVC】ASP.NET MVC 4项目模板的结构简介

    引言     在VS2012新建一个窗体验证的MVC 4项目后,可以看到微软已经帮我们做了很多了,项目里面该有的都有了,完全可以看成一个简单网站.作为开发,能理解里面文件结构和作用,也算是半只脚踏进M ...

  7. Struts2基本使用(一)--在项目中引入Struts2

    Struts2基本使用 在MVC开发模式中,Struts2充当控制器(Controller)的角色.其主要功能就是处理用户请求,生成响应,是连接视图层(View)和模型层(Model)的桥梁.在处理用 ...

  8. JDK配置 java跨平台性

    jdk 虚拟机jre 依赖包javac 编译java 运行JAVA_HOME 一个存储jdk路径的自定义的变量,方便其他地方配置以后更改方便其他地方调用JAVA_HOME使用%JAVA_HOME%配置 ...

  9. 正则,String中用法,Pattern Matcher

    package com.正则表达式; import java.util.Scanner; /** * * 校验qq号码 * 1:要求必须是5-15位数字 * 2: 0不能开头 * 分析: * A:键盘 ...

  10. Eclipse 项目有红惊叹号

    Eclipse 项目有红感叹号原因:显示红色感叹号是因为jar包的路径不对 解决:在项目上右击Build Path -> Configure Build Paht...(或Propertise- ...