当我们做项目时,后台开发接口给我们,我们访问一般是跨域访问,那么如何使用 webpack 进行跨域访问,来完成前端测试的接口问题。
我们使用 node 开发后台接口,来模拟这个问题的答案。
const express = require("express");
const app = express();
app.get("/proxy",function(err,res){
res.json({"name":"Condor Hero"});
});
app.listen(500);
console.log("500 端口已经成功监听!");
上面的代码使用 node 和 express 配合,来模拟了 http://127.0.0.1:500/proxy 这个接口。
访问结果:
现在的问题是 8080 得不到 500 的数据。要设置代理跨域,改变前端的webpack.config.js:
//webpack.config.js
// var path = require("path");
// 使用webpack-dev-server 就不需要path
module.exports = {
mode:"development",
entry:"./App/main.js",
output:{
// webpack要求的输出路径
// path:path.resolve(__dirname,"dist"),
// webpack-dev-server的虚拟输出路径虚拟生成,不损坏硬盘,效率很高,热更新
publicPath:"virtual",
filename:"all.js"
},
// webpack-dev-server 动态实时更新不在需要watch:true;
// watch:true,
module:{
rules:[
{
test:/\.less$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "less-loader" // compiles Less to CSS
}
//上面的另一种写法
//use: ['style-loader', 'css-loader','less-loader']
]
},
{
test: /\.m?js$/,//匹配.mjs和.js结束的文件
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env','@babel/preset-react'],
// @babel/plugin-proposal-object-rest-spread翻译高级ES的...
// @babel/plugin-transform-runtime翻译高级ES的带星函数即Generator
plugins: ['@babel/plugin-proposal-object-rest-spread','@babel/plugin-transform-runtime']
}
}
}
]
},
resolve: {
//自动解析确定的扩展。默认值为:
extensions: [".js", ".json", ".jsx", ".css"],
//解析目录时要使用的文件名。默认:
mainFiles: ["index","Index"]
},
// 代理跨域
devServer: {
// 此处可以自定义访问端口号
port : 8080,
proxy: {
'/api': {
target: 'http://localhost:500',
pathRewrite: {'^/api' : ''}
}
}
}
}
webpack 官网配置地址 :https://webpack.js.org/configuration/dev-server/#devserverproxy
此时任何 500 的端口,都会被偷到 8080 端口来,但是要补一个/api:
现在:
http://127.0.0.1:8080/api/proxy
成功跨域。
网友评论