Webpack dev server使用http-proxy解决跨域问题

文档资料

webpack关于webpack-dev-server开启proxy的官方介绍
Vue-cli proxyTable 解决开发环境的跨域问题——虽然这篇是写vue的,不过用在webpack-dev-server上也是一样的
webpack设置代理
http-proxy-middleware——webpack-dev-server的实现方法其实是对这个的封装

配置http-proxy

在webpack的配置文件(webpack.config.js)中进行配置

module.exports = {
...此处省略一万字 // webpack-dev-server的配置
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
port: 3000,
host: '10.0.0.9',
proxy: {
'/test/*': {
target: 'http://localhost',
changeOrigin: true,
secure: false
}
}
}, ...此处省略一万字
};

上述配置中,关于http-proxy的只是 proxy: {...} 中的值

调用接口

为了方便起见,下面使用jquery封装好的ajax函数进行示范

$.ajax({
// url: 'http://10.0.0.9:3000/test/testFetch/Login.php', // 这样不行
url: '/test/testFetch/Login.php', // 这样行
type: 'post',
data: {
app_id: '13751313169',
password: '123456',
user_name: 'Nicholas'
},
success: function(data) {
console.log(data);
}
});

proxy中的部分参数说明

'/test/*' 以及 target: 'http://localhost'

  • 从名字就能看出,这个实际上是将匹配 '/test/*' 这种格式的API的域名重定向为 'http://localhost'
  • 结合上面的 “调用接口” 可以看出, url: '/test/testFetch/Login.php' 这句,实际上会自动补充前缀,也就是说,url: '/test/testFetch/Login.php' 等价于 url: 'http://10.0.0.9:3000/test/testFetch/Login.php'
    • 但是,我们使用了http-proxy进行重定向,这样的话,url: '/test/testFetch/Login.php' 等价于 url: 'http://localhost/test/testFetch/Login.php'

changeOrigin

  • true/false, Default: false - changes the origin of the host header to the target URL
  • 本地会虚拟一个服务端接收你的请求并代你发送该请求——这个是别人的说法
  • 我试了一下,就算这个参数设置成 false 也有部分情况是可以的,具体原因不详,所以还是将其设置成 true 吧

secure

  • true/false, if you want to verify the SSL Certs

pathRewrite

  • 例子: pathRewrite: {'^/api': ''}
  • Object-keys will be used as RegExp to match paths
  • 我猜,这里是将 '^/api' 使用 '' 代替(只是我猜,没是成功,估计是我的正则表达式写得不行)

附上使用Fetch API的代码

上述代码与 “调用接口” 中使用 $.ajax() 实现的效果是一样的

let testAsync = async function () {
var feeling = {
app_id: '13751313169',
password: '123456',
user_name: 'Nicholas'
}; var fetchParams = {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'include', // 将凭证也带上(例如cookies)
body: JSON.stringify(feeling),
}; let temp = await fetch('/test/testFetch/Login.php', fetchParams).then(response => response.text()); console.log(temp); // 这个就是一个json对象 return temp;
}; let data = testAsync(); // async函数返回值是一个Promise对象 console.log(data); // 这个是一个Promise对象

Webpack devServer中的 proxy 实现跨域的更多相关文章

  1. Webpack 开发服务器代理设置解决跨域问题

    在前端开发过程中,可能会遇到跨域问题,在 webpack 设置中对 devServer 配置代理即可解决跨域问题,具体设置如下: webpack.config.js module.exports = ...

  2. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  3. Web API中使用CORS解决跨域

    Web API中使用Cros解决跨域 如果两个页面的协议,端口和域名都相同,则两个页面具有相同的源,注:IE不考虑端口,同源策略不会阻止浏览器发送请求,但是它会阻止应用程序看到响应.如下图所示 COR ...

  4. spring boot 中通过CORS实现跨域

    一.跨域问题出现的原因 出现跨域问题的原因是同源策略. 同源策略 主要是三同:同协议.同域名.同端口, 同源策略目的 保证用户信息安全,防止恶意网站窃取数据.同源策略是必须的,否则cookie可以共享 ...

  5. 解决 ionic 中的 CORS(跨域)

    译者注:本人翻译功力有限,所以文中难免有翻译不准确的地方,凑合看吧,牛逼的话你看英文版的去,完事儿欢迎回来指正交流(^_^) 如果你通过 ionic serve 或者 ionic run 命令使用或 ...

  6. proxy解决跨域问题

    首先我们在本地开发,域名都是localhost,当我们需要请求后台数据时,就会出现跨域的问题 下面就是在vue.config.js配置文件里: devServer: {     proxy: {    ...

  7. mvc中使用jsonp进行跨域请求详细说明

    在web开发中,如果你要在不同域下进行数据异步请求,会出现一个No ‘Access-Control-Allow-Origin’ header is present on the requested r ...

  8. html5中的postMessage解决跨域问题

    解决跨域问题的方法有很多,如:图像ping(简单).jsonp(缺点是不能实现跨域post).CROS(CORS的本质让服务器通过新增响应头Access-Control-Allow-Origin,通过 ...

  9. 在ExpressJS中设置二级域名跨域共享Cookie

    问题:我使用expressjs和mongostore来管理session.下面是expressjs中的设置. app.configure(function(){ app.use(express.ses ...

随机推荐

  1. WebClient 上传文件

    iis6.0 条件:必须启用WEBDAV  需要将要上传到的目录权限加上匿名登陆,而且必须在IIS上创建虚拟目录,将文件上传到虚拟目录才能成功,否则就会出现403禁止错误下面放上我测试好的代码. // ...

  2. eclipse如何加入第三方jar包

    1.项目右键选择“properties” 2.选Java Build Path 3.选Libraries 4.选add JRAS jar包下载平台:http://www.mvnrepository.c ...

  3. MySQL_select语句(不定时更新)

    1.SELECT语句 select if(fraction>=60 and fraction<=100,'合格','不合格') from sp_employeezzvalidate;

  4. Telnet的三种登录方式

    Telnet的三种登录方式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.华为创建telnet的三种验证方式 首先,我们可以简单的看一个拓扑图,让我们可以在亦庄的路由器上对双桥 ...

  5. Log4net(三)——RollingFileAppender配置

    RollingFileAppender配置 log4net的记录介质很多,这里只总结最常用的方式之一:RollingFileAppender. 1.日志文件名是以文件大小进行变换的 如果日志文件大小到 ...

  6. POJ - 1039 Pipe(计算几何)

    http://poj.org/problem?id=1039 题意 有一宽度为1的折线管道,上面顶点为(xi,yi),所对应的下面顶点为(xi,yi-1),假设管道都是不透明的,不反射的,光线从左边入 ...

  7. HDU - 4370 0 or 1

    0 or 1 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  8. Neural Networks and Deep Learning 课程笔记(第三周)浅层神经网络(Shallow neural networks)

    3.1 神经网络概述(Neural Network Overview ) (神经网络中,我们要反复计算a和z,最终得到最后的loss function) 3.2 神经网络的表示(Neural Netw ...

  9. Selenium自动化Page模式(Python)

    Selenium是当前主流的web自动化工具,提供了多种浏览器的支持(Chrome,Firefox, IE等等),当然大家也可以用自己喜欢的语言(Java,C#,Python等)来写用例,很容易上手. ...

  10. UBUNTU18.4环境下使用更好用的搜索引擎(无奈,只能起这样的标题)

    初步安装 更新软件源 sudo apt-get update 安装pip (一个安装和管理 Python 包的工具) sudo apt-get install python-pip sudo apt- ...