webpack4个人学习详细笔记（10）--webpack跨域问

1. 通过webpack的devServer 来运行部署我们的前端代码
   自己写一个服务端 server.js

let express = require('express')

let app = express()

app.get('/api/user', (req,res) => {
  res.json({name: '我是服务器返回的数据'})
})

app.listen(3000)

node server.js

image.png

index.js

let xhr = new XMLHttpRequest()
// 相当于访问 http:localhost:8080 -->webpack-dev-server的服务 -->3000
xhr.open('GET', '/api/user', true) 
xhr.onload = function() {
  console.log(xhr.response)
}

xhr.send()

npm run dev

image.png

为了解决上面跨域问题,在配置文件上配置如下：

  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'/api': ''} // 把前面的路径重写为后面的
      }
    }
  }

image.png

2. mock数据

  devServer: {
    before(app) {
      app.get('/api/user', (req,res) => {
        res.json({name: '我是模拟的数据'})
      })
    }
  },

3. 在服务端中启动webpack，这样webpack中的前端代码请求数据和服务器的资源在同一个域中了

yarn add webpack-dev-middleware -D

let express = require('express')
let app = express()
let webpack = require('webpack')

// 中间件
let middle = require('webpack-dev-middleware')

let config = require('./webpack.config')

let compiler = webpack(config)

app.use(middle(compiler))

app.get('/api/user', (req,res) => {
  res.json({name: '我是服务器返回的数据'})
})

app.listen(3000)

node server.js