js webpack 解决跨域问题_详解webpack-dev-server使用http-proxy解决跨域问题
文档资料
Vue-cli proxyTable 解决开发环境的跨域问题——虽然这篇是写vue的,不过用在webpack-dev-server上也是一样的
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对象
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
js webpack 解决跨域问题_详解webpack-dev-server使用http-proxy解决跨域问题相关推荐
- webpack 异步加载配置文件_详解webpack异步加载业务模块
虽然把我们用到的JS文件全部打包一个可以节省请求数,但如果打包后的JS文件过大,那么也容易出现白屏现象,许多操作失灵.而且一些区域是点到才出现,那么相关的JS其实可以剥离出这个大JS文件外.这就涉及到 ...
- node js并发加载页面缓慢_详解如何利用前端Node模块zlib开启gzip压缩使页面加载速度更快...
前言 这篇文章我们来聊一聊Node的原生模块zlib,它的主要作用是压缩和解压缩数据,我们都知道数据在压缩后可以减小体积,在网络传输时提高传输速度和节约带宽! API用法 zlib这个模块提供了很多的 ...
- python跨域攻击教学_关于python 跨域处理方式详解
因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送ht ...
- 跨域资源共享CORS详解
最近深入了解了CORS的相关东西,觉得阮一峰老师的文章写得最详细易懂了,所有转载作为学习笔记. 原文地址:跨域资源共享 CORS 详解 CORS是W3C的一个标准,全称是跨域资源共享(Cross-or ...
- webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
- vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- 用DFS 解决全排列问题的思想详解
用DFS 解决全排列问题的思想详解 参考文章: (1)用DFS 解决全排列问题的思想详解 (2)https://www.cnblogs.com/curo0119/p/8414195.html 备忘一下 ...
- 大脑构造图与功能解析_大脑的结构和功能分区_详解人脑构造与功能
大脑的结构和功能分区 _ 详解人脑构造与功能 学习,可以开阔人的大脑 ; 学习,可以使人的大脑拥有更多的知识,人的大脑和肢 体一样,多用则灵,不用则废.那么下面学习啦小编给大家分享一些大脑的结构和功 ...
- 计算机打开程序乱码,打开软件乱码怎么解决,详解win7电脑打开软件乱码的解决方法...
今天小编给大家详解win7电脑打开软件乱码的解决方法,使用win7系统过程中,有时用户会遇到电脑打不开软件,打开乱码的问题,为此问题困扰的用户,可参照以下的方法进行解决. 最近有位win7系统用户使用 ...
最新文章
- stl-----全排列
- 23、HTML图像按钮
- 在AWS Elastic MapReduce上运行PageRank Hadoop作业
- fwrite在任意位置写入文件,并可修改文件内容
- 5.4 self-attention以及mask操作的实现
- Kubernetes详解(十九)——Kubernetes Pod控制器
- Bex5开发技巧之如何在列表中显示主键字段
- C语言中的++和--
- C语言基础入门一(自学笔记)
- php上位机,OV7670摄像头上位机软件源码
- 新买的笔记本计算机内存不足,笔记本内存不够怎么办_笔记本内存不足如何解决...
- 性能优化,进无止境---内存篇(上)
- LICEcap 简洁易用的动画屏幕录制软件
- [计算机网络] 实验 5 电子邮件
- 影刀学习抓取网页详情
- Problem G: 开个餐馆算算账
- Leetcode 414. 第三大的数(详解 C语言实现)
- 服务器为什么要封海外,UDP攻击是什么
- JAVA网络编程个人笔记 第4章 inet地址
- 最小二乘python_python怎么做最小二乘估计
热门文章
- SpringBoot默认日志配置输出级别
- 如何才能写出一手逼疯同事的烂代码?
- 啥?用了并行流还更慢了
- 。。。,带着这三点疑问,让我们层层深入的对HTTPS原理进行剖析!
- SpringBoot 整合 RabbitMQ 实践
- mongodb数据库显示obj_Mongodb使用
- Docker启动失败提示【exec user process caused: exec format error】
- leetcode题解200-岛屿数量
- error C2086: “int WINGDIAPI”: 重定义
- Git-简单安装与使用