webpack配置实现跨域请求

webpack配置实现跨域请求

配置webpack的前提条件配置webpack-dev-server的代码展示相关参数参数的详细介绍 最后附上全部 webpack.config.js 配置的代码

配置webpack的前提条件

先是要安装：webpack-dev-server 插件 ，npm i webpack-dev-server配置webpack ；

配置webpack-dev-server的代码展示

在 webpack.config.js 中配置代码

devServer: { historyApiFallback: true, hot: true, inline: true, contentBase: "./app", // port: 3000, //前面是配置 webpack-dev-server 的，也可以 package.json 文件中配置 proxy: { "/api": { // target: 'http://localhost:8888', target: 'https://www.baidu.com', //要跨域的地址 pathRewrite: {'^/api' : ''}, //把遇到的/api 清除掉请求 changeOrigin: true, // target是域名的话，需要这个参数， secure: false, // 设置 支持https协议的代理，支持能在https服务 }, // 就可以请求以 https://www.baidu.com 开头的后台数据了 //配置 跨域的主要代码 '/api2': { ..... } //可以配置多个请求 }, },

在页面上就可以实现跨域请求了

this.$axios.get("/api/app/machineInfo/queryMachineList").then(result => { //此时就会被代理成 https://www.baidu.com/app/machineInfo/queryMachineList 的地址 console.log(result) // 要以 /api 开头后面就是实际的地址了 })

相关参数参数的详细介绍

‘/api’ ，捕获API的标志，如果API中有这个字符串，那么就开始匹配代理， 比如API请求/api/users, 会被代理到请求 http://www.baidu.com/api/users 。target ，代理的API地址，就是需要跨域的API地址。 地址可以是域名,如：http://www.baidu.com 也可以是IP地址：http://127.0.0.1:3000 如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败。pathRewrite ，路径重写，也就是说会修改最终请求的API路径。 比如访问的API路径：/api/users, 设置pathRewrite: {’^/api’ : ‘’},后， 最终代理访问的路径：http://www.baidu.com/users， 这个参数的目的是给代理命名后，在访问时把命名删除掉。

； 4. changeOrigin， 这个参数可以让target参数是域名； 5. secure ， secure: false,不检查安全问题。 设置后，可以接受运行在 HTTPS 上，可以使用无效证书的后端服务器；

最后附上全部 webpack.config.js 配置的代码

const path = require('path') // const webpack = require('webpack') //启动热更新 第2步 const htmlWebpackPlugin = require('html-webpack-plugin') //导入在内存中生成 HTML 页面的插件 //只要是插件，就一定要放在 plugins 节点中去 const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { entry : path.join(__dirname, './src/main.js'), //入口，表示使用webpack打包的文件 output :{ path: path.join(__dirname, './dist'), //指定打包好的文件储存位置 filename: 'bundle.js' //指定输出文件的名字 }, //配置"dev": "webpack-dev-server"的第二种方法 // devServer:{ // open:true, //自动打开浏览器 // port:3000, //设置启动时运行的窗口 // contentBase: 'src', //指定托管的根目录 // hot: ture //启动热更新 第1步 // }, devServer: { historyApiFallback: true, hot: true, inline: true, contentBase: "./app", // port: 3000, proxy: { "/api": { // target: 'http://localhost:8888', target: 'https://vm.fowotek.com', pathRewrite: {'^/api' : ''}, changeOrigin: true, // target是域名的话，需要这个参数， secure: false, // 设置支持https协议的代理 } }, }, plugins: [ //配置插件节点 // new webpack.HotModuleReplacementPlugin(), //创建一个热更新模板对象 第3步 new htmlWebpackPlugin({ template: path.join(__dirname,'/src/index.html'), //指定模板页面，将来根据这页面路径直接去生成内存中的页面 filename: 'index.html' //指定生成的页面名称 }), new VueLoaderPlugin() //路由组件在最新版是需要配置 ], module:{ //这个节点，用来配置 所有 第三方模块 加载器 rules: [ //所有第三方模块的 匹配规则 { test:/\.css$/, use: ['style-loader','css-loader']}, // 匹配css类型 { test:/\.less$/, use: ['style-loader','css-loader','less-loader']}, // 匹配less类型 { test:/\.scss$/, use: ['style-loader','css-loader','scss-loader']}, // 匹配scss类型 { test:/\.(jpg|png|gif|bmp|jpeg)$/, use: ['url-loader?limt&name=[hash:8]-[name].[ext']}, // 匹配图片类型， //?limt传参，给定的值是图片的大小，单位是byty，如果limit值大于图片大小会转成base64格式字符串，若小于等于则不会转成base64的字符串 //name传参不改变图片名字和格式 { test:/\.(ttf|eot|svg|woff|woff2)$/, use: ['url-loader']}, // 匹配处理字体文件 // { test:/\.js$/, use: 'babel-loader' , exclude: /node_modules/},//配置babel 来转换高级的es6语法 { test:/\.vue$/, use: 'vue-loader'}, //处理 .vue 文件的loader { test: /\.scss$/, loaders: ['style', 'css', 'sass']} ] }, resolve: { alias: { //修改 vue 被导入时候的包路径 "vue$": 'vue/dist/vue.js' //以vue结尾的往地址中寻找 } } }