webpack-dev-server 设置反向代理解决跨域问题
2024-10-19 03:35:12
一、设置代理的原因
现在对前端开发的要求越来越高,并且随着自动化以及模块化的 诞生,前后端开发模式越来越流行。后端只负责接口,前端负责数据展示、逻辑处理。但是前后端开发模式,有一个重要的问题,就是跨域问题。
二、如何配置webpack的代理
webpack代理需要另外一个插件:webpack-dev-server
webpack-dev-server配置代理非常的方便,只需要条件一个proxy属性,然后配置相关的参数就可以了:
var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../'); // 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist'); // 最后输出放置公共资源的目录
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { //项目的文件夹 可以直接用文件夹名称 默认会找index.js ,也可以确定是哪个文件名字
entry: {
app: ['./src/js/index.js'],
vendors: ['jquery', 'moment'], //需要打包的第三方插件
// login:['./src/css/login.less']
}, //输出的文件名,合并以后的js会命名为bundle.js
output: {
path: path.join(__dirname, "dist/"),
publicPath: "http://localhost:8088/dist/",
filename: "bundle_[name].js"
},
devServer: {
historyApiFallback: true,
contentBase: "./",
quiet: false, //控制台中不输出打包的信息
noInfo: false,
hot: true, //开启热点
inline: true, //开启页面自动刷新
lazy: false, //不启动懒加载
progress: true, //显示打包的进度
watchOptions: {
aggregateTimeout: 300
},
port: '8088', //设置端口号
//其实很简单的,只要配置这个参数就可以了
proxy: {
'/index.php': {
target: 'http://localhost:80/index.php',
secure: false
}
} }
.......... };
上面实例中我们把本地的端口号设置为了:8088,如果这个时候接口放在了端口为80的服务器上,并且我们请求的接口url如下:
http://localhost:80/index.php
这个时候只需要在proxy使用正则表达式匹配/index.php,然后 匹配到 转向target设置的目标接口;这个时候使用ajax请求接口就不要写上目标接口的域名,只需要写上index.php就可以了。
$.ajax({
type: 'GET',
url: '/index.php',
data: {},
dataType: 'json',
beforeSend: function () {
},
success: function (data) { },
error: function (error) { }
});
上面ajax请求的时候proxy 代理就会自动转向target设置的接口路径:
http://localhost:80/index.php
最新文章
- Idea下用SBT搭建Spark Helloworld
- DXUT源码阅读笔记
- HashMap和SparseArray的性能比较。
- NSDate和NSString相互转换
- 第 29 章 CSS3 弹性伸缩布局[中]
- python学习-爬虫
- github for windows回滚到某一个版本,
- 手机连接wifi自动弹窗的原理及其实现方案
- 【POJ】【1739】Tony's Tour
- Shredding Company(dfs)
- 单线程Singleton模式的几个要点
- html5权威指南:html全局属性
- CSS设置一行文字,超出部分自动隐藏
- Linux 访问权限
- 关于Linux 虚拟机如何才能ping 通外网
- 如何手动删除服务?Windows手动删除服务列表中残留服务的方法
- Ubuntu 18.04 修改为静态IP
- thinkphp5 速查表
- 使用FastJson从json串中根据key获取value
- Java事件监听的四种实现方式
热门文章
- 关系网络理论︱细讲中介中心性(Betweeness Centrality)
- CAN控制器-配置过滤器
- Caused by: org.springframework.beans.factory.BeanCreationException: Could not autowire field
- Invalid property 'driver_class' of bean class
- RTSP协议分析
- Linux显示包含全部的文件系统
- Linux查看磁盘剩余空间
- ASP.NET 页面双向静态化
- C#多线程编程(3)--开启子任务
- json数组本地获取,以及根据字段排序【部分摘录】