2.4 webpack 跨域问题配置

504 阅读2分钟

webpack知识树
在说这个问题之前,我们的先写一个node服务!
这里需要使用express框架,具体这里就不深究。
下面我们创建一个server.js给出代码

let express = require('express');
let app = new express();
// 当get方式访问/api/user 接口的时候,返回json数据
app.get('/api/user',(req,res)=>{
    res.json({name:'我是某某某'}) // 服务返回数据
});
// 监听端口
app.listen(8888);

执行命令node sever.js 浏览器看下是不是可以拿到结果!

ok!    下面开始正式内容在创建一个Ajax请求

  • 1.index.js代码如下
// Ajax Get请求
let getUserAction = ()=> {
    let xhr = new XMLHttpRequest();
    xhr.open('GET','/api/user',true)
    xhr.onload = function () {

    }
    xhr.send()
}
window.getUserAction = getUserAction
  • 2.index.html 按钮点击触发
<div>
    <button class="btn-danger btn" onclick="getUserAction">提交</button>
</div>

执行npm run dev,点击按钮提交按钮,默认还是在http://localhost:8081/

一、配置代理解决跨域问题

我们在webpack.dev.js重新配置下代理

devServer: {
        port:8081,  //端口
        progress:true, // 是否显示进度条
        contentBase:'./dist', // 打包输出目录
        compress:true,
        proxy:{
            '/api':{
                target:'http://localhost:8888', // 请求服务地址
                pathRewrite:{'/api':'/api'}// 请求有/api前缀的后面加上/api,这个就可以根据服务进行适配路径
            }
        }
    },

执行npm run dev,点击按钮提交按钮,看下效果

这里只是dev环境下配置,当部署到nginx 或者其它容器的时候也需要配置下代理。

二、部署前端与后端服务在同一个端口

其实这个也简单,在现有工程,只要在服务端开启的时候,同时启动webpack。
这里需要引用一个中间件webpack-dev-middleware在服务端启动webpack,其它后台环境也是同样的道理。
执行npm i webpack-dev-middleware -D下载插件

  • 1.我们在server.js修改如下
let express = require('express');
let app = new express();
let webpack = require('webpack')
// 中间件
let middleware = require('webpack-dev-middleware')
let config = require('./webpack.dev')
let compiler = webpack(config)
app.use(middleware(compiler,{
    publicPath:config.output.publicPath
}))
// 当get方式访问/api/user 接口的时候,返回json数据
app.get('/api/user',(req,res)=>{
    res.json({name:'我是某某某'}) // 服务返回数据
});
// 监听端口
app.listen(8888);
  • 2.取消webpack 启动server.js服务,并在同端口加载webpack打包前端代码。
    在改写中提示很多路径错误问题,这边在webpack.base.js中做了路径的修改,后续源码会给出!

现在在8888端口,点击按钮可以直接访问了。

创建文件夹,cd至已创建文件夹,执行 git clone https://gitee.com/dolan_ge/webpack.git -b webpack_cross

进入webpack工程目录,执行 npm install -D